@font-face{font-display:swap;font-family:"GdG";src:url(/assets/fonts/gdg.eot);src:url(/assets/fonts/gdg.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/gdg.woff2) format("woff2"),url(/assets/fonts/gdg.woff) format("woff"),url(/assets/fonts/gdg.ttf) format('truetype'),url(/assets/fonts/gdg.svg#GdG) format('svg');font-weight:400;font-style:normal}@font-face {font-display: swap;font-family: "Raleway";font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/raleway.woff) format("woff");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}:root {--hvdtblue: #183446;--hvdtgreen: #a2e83a;--actired: #e94349;--actipurp: #5a21a6;--mint: #2ba385;--darkmint: #00865e;--yellow: #fbb317;--yellowLight: #efc96b;--accent: #91c63f;--accent2: #b9e84e;--dark: #24381a;--shade: #8aa05a;--shadeSec: #5f7240;--red: #e94349;--alt: #788b4f;--midg: #67833d;--back: #6d8146;--backSec: #84a24f;--white: #fff;--black: #000;--fitContentWidth: "width: -webkit-fit-content; width: -moz-fit-content; width: fit-content";--fitContentHeight: "height: -webkit-fit-content; height: -moz-fit-content; height: fit-content";} .mint { color: var(--mint) } .bg-mint {background-color: var(--mint) } .darkmint { color: var(--darkmint) } .bg-darkmint {background-color: var(--darkmint) } .hvdtblue { color: var(--hvdtblue) } .bg-hvdtblue {background-color: var(--hvdtblue) } .hvdtgreen {color: var(--hvdtgreen) } .bg-hvdtgreen { background-color: var(--hvdtgreen) } .actired {color: var(--actired) } .bg-darkmint {background-color: var(--actired) } .blk {color: var(--black) } .bg-blk { background-color: var(--black) } .dark { color: var(--dark) } .bg-dark {background-color: var(--dark) } .white {color: var(--white) } .bg-white { background-color: var(--white) } .shade {color: var(--shade) } .bg-shade { background-color: var(--shade) } .shadeSec { color: var(--shadeSec) } .bg-shadeSec {background-color: var(--shadeSec) } .accent { color: var(--accent) } .bg-accent {background-color: var(--accent) } .accent2 {color: var(--accent2) } .bg-accent2 { background-color: var(--accent2) } .yellow { color: var(--yellow) } .bg-yellow {background-color: var(--yellow) } .yellowLight {color: var(--yellowLight) } .bg-yellowLight { background-color: var(--yellowLight) } .midg { color: var(--midg) } .bg-midg {background-color: var(--midg) } .bodyBgMint { background-color: var(--mint); background-image: url(/assets/images/svg/bgMint.svg) } .bodyBgGeel { background-color: var(--yellow); background-image: url(/assets/images/svg/bgGeel.svg) } .gdg {font-family: 'GdG', GdG, Arial } .raleway {font-family: 'Raleway', Raleway, Arial } .devBorder {border: 1px solid red } .hand { cursor: pointer; cursor: hand } .is-hidden, .ndsp { display: none } .opa0 { opacity: 0} .float {float: left } .normal { font-weight: normal } .bold { font-weight: bold } .is-mobile .is-hidden-for-mobile {display: none } .is-desktop .is-hidden-for-mobile {display: block }input {border-radius: 0;}input[type="search"] {-webkit-appearance: none;}input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder {font-weight: normal;opacity: 1.0;color: var(--hvdtblue);}input::placeholder {font-weight: normal;opacity: 1.0;color: var(--hvdtblue);}input:focus:-moz-placeholder, input:focus::-moz-placeholder, input:focus:-ms-input-placeholder {color: var(--hvdtblue);opacity: 0.5;}input:focus::-webkit-input-placeholder {color: var(--hvdtblue);opacity: 0.5;} .big-type, .ivy, .l-panel .op-t h1, .l-panel .op-t h2, .l-panel .p-t h1, .l-panel .p-t h2, .menu .in .links, .menu .in .specialismes .flex a strong { font-family: 'GdG', GdG, sans-serif; font-weight: 300; font-style:normal !important} .cursor i em, .f-en, .l-panel .op-t p, .l-panel .op-t span, .l-panel .p-t p, .l-panel .p-t span, .menu .in .specialismes span, .raleway { font-family: 'Raleway', Raleway, sans-serif; font-weight: 300; font-style:normal !important} .is-firefox .t-mask {opacity:0}body:not(.is-firefox) .t-mask {display: inline-block;mask-image: url(/assets/images/common/mask.png);-webkit-mask-image: url(/assets/images/common/mask.png);-webkit-mask-size: 3400% 100%;-webkit-mask-position: -97% 0;mask-position:-97% 0}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;word-wrap: break-word;outline: 0 !important;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;-o-font-smoothing: antialiased;font-smoothing: antialiased;-webkit-tap-highlight-color: transparent;font-feature-settings: 'palt'}abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;border: 0;outline: 0;background:0 0}article, aside, details, em, figcaption, figure, footer, header, hgroup, i, menu, nav, section, strong {font-style: normal;display:block}nav ul {list-style:none}blockquote, q {quotes:none}span {display:block}q:after, q:before {content: '';content:none}img {width: 100%;vertical-align:bottom}a {font-size: 100%;display: block;margin: 0;padding: 0;cursor: pointer;transition: all .6s;vertical-align: baseline;text-decoration: none;color: var(--white);background:0 0}ins {text-decoration: none;color: #000;background-color:#ff9}mark {font-weight: 700;font-style: italic;color: #000;background-color:#ff9}del {text-decoration:line-through} .is-desktop svg {width: 100%;height:100%}i {display:block}abbr[title], dfn[title] {cursor: help;border-bottom:1px dotted}table {border-spacing: 0;border-collapse:collapse}hr {display: block;height: 1px;margin: 1em 0;padding: 0;border: 0;border-top:1px solid #ccc}::-moz-selection {color: #f7f5ef;background:#000}::selection {color: #f7f5ef;background:#000} .comp {position: absolute;z-index: 1000;top: 0;left: 0;width: 100%;height: auto;pointer-events: none;opacity:.4}@media screen and (min-width: 768px) { .pc-none {display:none !important}}@media screen and (max-width: 768px) {.is-mobile .sp-none {display:none !important}}body, html {font-family: 'Raleway', Raleway, sans-serif;font-size: 62.5%;font-weight: 400;position: relative;color: var(--white);background-repeat: no-repeat;background-size: cover}@media screen and (max-width: 768px) {body, html {background-position: -393px;overflow: hidden}}@media screen and (min-width: 768px) { body.is-desktop {height: 100vh;overflow:hidden;overscroll-behavior:none}}body h2, body h3, body h4, html h2, html h3, html h4 {line-height:1.5} .is-hidden {overflow:hidden}@media screen and (min-width: 768px) {.is-scrolled .logo {opacity:0} .is-scrolled .GdGLogo {opacity:0}} .is-scroll-max .nav .scroll {opacity:0} .is-menu-open .nav .btn-m {opacity: 0;pointer-events:none} .is-menu-open .logo {transition:all .8s} .nav {position: fixed;z-index: 500;top: 24px;right: 17px;width: calc(100% - 34px);height: 62px;pointer-events: none} .is-menu-open .logo svg {}@media screen and (min-width: 768px) {.is-desktop .nav {width: 187px;height: 114px;top: 30px;right: 0px}} .nav .btn-m {z-index: 959;pointer-events: visible;position: absolute;top: 0;right: 0;width: 125px;height: 76px}@media screen and (max-width: 768px) {.is-mobile .nav .btn-m {width: 80px;height: 49px}}@media screen and (min-width: 768px) {.is-desktop .nav .btn-m {top: 15;left: 0;cursor:pointer}} .logo {position: absolute;top: 25px;left: 25px;z-index: 959;transition:opacity .4s} .is-desktop .GdGLogo {position: absolute;bottom: 60px;right: 90px;z-index: 959;transition:opacity .4s} .is-chrome #gdgl {width: 140px;height: 135px;cursor: pointer} .is-chrome .GdGLogo {position: absolute;top: calc(83vh-200px);right: 75px;width: 140px;height: 135px;background-image: url(/assets/images/svg/gdg-logo.svg);background-size: 140px 135px;background-repeat: no-repeat;z-index: 959} .is-mobile .GdGLogo {opacity: 0}@media screen and (max-height: 844px) {.GdGLogo {opacity: 0}}@media screen and (min-width: 768px) {.is-desktop .logo {left: 50px}}@media screen and (max-width: 768px) {.is-desktop .GdGLogo {opacity: 0}} .logo span, .GdGLogo span {display:none} .logo svg {float: left;width: 80px;height: 83px;transition:all .8s} .GdGLogo svg, #GdGLogo {float: left;width: 140px;height: 135px;transition:all .8s}@media screen and (min-width: 768px) {.is-desktop .logo svg {width: 170px;height: 177px}} .menu {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image: url(/assets/images/svg/bgMenu.svg); background-repeat: no-repeat; background-size: cover;z-index: 949;opacity: 0;transform: translateX(0) translateZ(0);transition: opacity .4s;pointer-events:none}@media screen and (max-width: 768px) {.menu {background-position: -393px}}@media screen and (min-width: 768px) { .is-mobile .menu {overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;overflow-scrolling:touch}}@media screen and (max-width: 768px) {.menu {overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;overflow-scrolling:touch}}@media screen and (min-width: 768px) {.is-desktop .menu {display: flex;flex-wrap: wrap;align-items: center;justify-content:center}} .menu.is-in {opacity: 1;pointer-events:visible} .menu .btn-c {position: fixed;top: 24px;right: 18px;width: 60px;height:60px;z-index: 959}@media screen and (min-width: 768px) {.is-desktop .menu .btn-c {top: 45px;left: auto;right: 90px;cursor:pointer} .menu .btn-c:hover span:before {transform:translate3d(-100%, 0, 0)} .menu .btn-c:hover span:after {transform:translate3d(0, 0, 0)} .menu .btn-c:hover span:last-child:before {transform:translate3d(100%, 0, 0)} .menu .btn-c:hover span:last-child:after {transform:translate3d(0, 0, 0)}}@media screen and (min-width: 1920px) {.is-desktop .menu .btn-c {top: 45px;left: auto;right: 120px;cursor:pointer}} .menu .btn-c span {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 42px;height: 5px;margin: auto;overflow: hidden;transform:translate3d(0, 0, 0) rotate(-45deg)} .menu .btn-c span:before {position: absolute;top: 0;left: 0;width: 42px;height: 5px;background: var(--hvdtgreen);transition: transform .6s;display: block;content: ''} .menu .btn-c span:after {position: absolute;top: 0;left: 0;width: 42px;height: 5px;background: var(--hvdtblue);transition: transform .6s;transition-delay: .1s;transform: translate3d(100%, 0, 0);display: block;content: ''} .menu .btn-c span:last-child {transform:translate3d(0, 0, 0) rotate(45deg)} .menu .btn-c span:last-child:after {transform:translate3d(-100%, 0, 0)} .menu .in {padding:120px 0 40px}@media screen and (min-width: 768px) {.is-desktop .menu .in {padding:0}} .menu .in .links {width: 100%;font-size: 3rem;line-height: 1.4;text-align: center;margin-bottom:20px}@media screen and (min-width: 768px) {.is-desktop .menu .in .links {margin: 0;text-align: center;font-size:4.2rem}} .menu .in .links a {overflow: hidden;display: inline-block;padding:3px 0} .menu .in .links a:hover {opacity:1}@media screen and (min-width: 768px) {.is-desktop .menu .in .links a {padding:0 18px}} .menu .in .links a i {position: relative;overflow:hidden} .menu .in .links a i span {transform: translate3d(-105%, 0, 0);background-color: currentColor;position: absolute;width: 100%;height: 1px;background-color: currentColor;bottom: 4px;left:0} .l-panel {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;pointer-events: none;color: var(--actired)} .l-panel .op-t, .l-panel .p-t {opacity: 0;text-align: center;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;display: flex;justify-content: center;align-items:center} .l-panel .op-t .in, .l-panel .p-t .in {padding:0 50px} .l-panel .op-t span, .l-panel .p-t span {color: #999;font-size: .9rem;letter-spacing: 1px;margin-bottom:6px}@media screen and (min-width: 768px) {.is-desktop .l-panel .op-t span, .l-panel .p-t span {margin-bottom: 10px;font-size:1.4rem}} .l-panel .op-t h1, .l-panel .p-t h1 {font-size: 22vw;text-indent: -.1vw;line-height: 1;display: flex;justify-content:center}@media screen and (min-width: 768px) {.is-desktop .l-panel .op-t h1, .l-panel .p-t h1 {font-size:15vw}} .l-panel .op-t h2, .l-panel .p-t h2 {font-size: 16vw;text-indent: -.1vw;line-height: 1;display:flex} .l-panel .op-t h2 i, .l-panel .p-t h2 i {padding-bottom:1.5vw}@media screen and (min-width: 768px) {.is-desktop .l-panel .op-t h2 i, .l-panel .p-t h2 i {padding-bottom:1.5vw}}@media screen and (min-width: 768px) {.is-desktop .l-panel .op-t h2, .l-panel .p-t h2 {font-size:12vw}} .l-panel .op-t p, .l-panel .p-t p {margin-top: 10px;line-height: 1.5;letter-spacing: .2px;font-size:.8rem}@media screen and (max-width: 768px) {.l-panel .op-t p, .l-panel .p-t p {padding:0 26px} .l-panel .op-t p br, .l-panel .p-t p br {display:none}}@media screen and (min-width: 768px) {.is-desktop .l-panel .op-t p, .l-panel .p-t p {margin-top: 24px;font-size:1.2rem}} .l-panel .render {position: absolute;z-index: 0;width: 100%;height:100%} .t-l {position: relative;width: calc(100% - 72px);margin:0 auto}@media screen and (min-width: 768px) {.is-desktop .t-l {width: 100%;margin-left:0}} .t-l .small {position: absolute;top: -16px;width: 27vw;left: 0;margin-top:6.6vw}@media screen and (min-width: 768px) {.is-desktop .t-l .small {top: -6px;width: calc(13.2vw - 20px);margin-top:1.7vw}} .t-l .small .flex {display:flex} .t-l .small .flex .c-t {font-size: 1rem;position:relative}@media screen and (min-width: 768px) {.is-desktop .t-l .small .flex .c-t {font-size:1.1rem}} .t-l .small .flex .bd {position: relative;width: 100%;transition: all 1s;top:7px} .t-l .small .flex .bd:before {display: block;content: '';position: absolute;top: 0;left: 0;background-color: #444;height: 1px;width:100%} .t-l .main {font-size: 6.4vw;line-height: 1.4;letter-spacing: 1px;display: flex;flex-wrap:wrap}@media screen and (min-width: 768px) {.is-desktop .t-l .main {font-size:2.7vw}} .t-l .main .indent {text-indent:30vw}@media screen and (min-width: 768px) {.is-desktop .t-l .main .indent {text-indent:13.2vw}} .pointer-none {pointer-events:none} #preview-overlay { width: 100vw; height: 100vh; background-color: var(--darkmint); z-index: 999 } #preview-area {width: 60px;height: 60px;position: absolute;top: 0;left: 0;bottom: 180px;right: 0;margin: auto;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;z-index: 1001} .spinner {width: 40px;height: 40px;position: relative;margin: 100px auto;} .double-bounce1, .double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: var(--hvdtgreen);opacity: 0.6;position: absolute;top: 0;left: 0;-webkit-animation: sk-bounce 2.0s infinite ease-in-out;animation: sk-bounce 2.0s infinite ease-in-out;} .double-bounce2 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}@-webkit-keyframes sk-bounce {0%, 100% { -webkit-transform: scale(0.0) }50% { -webkit-transform: scale(1.0) }}@keyframes sk-bounce {0%, 100% {transform: scale(0.0);-webkit-transform: scale(0.0);} 50% {transform: scale(1.0);-webkit-transform: scale(1.0);}} .c02166 {top: 100%;left: calc(7.1429vw - .071429 * var(--scrollbar-width));color: var(--hvdtblue);right: calc(7.1429vw - .071429 * var(--scrollbar-width));display: flex;padding: 4.1333vw 4.2667vw;z-index: 901;position: fixed;font-size: 2.7333vw;background: var(--hvdtgreen);transition: visibility 1s, transform 1s cubic-bezier(.77, 0, .175, 1);visibility: hidden;justify-content:space-between}@media (min-width: 786px) {.is-mobile .c02166 {right: auto;left: calc(4.6923vw - .076923 * var(--scrollbar-width));width: auto;padding: .8333vw 1.6667vw;font-size: 1.2722vw;max-width: calc(36.5385vw - .615385 * var(--scrollbar-width));align-items:center}}@media (min-width: 1024px) {.is-desktop .c02166 {right: auto;left: calc(2.6923vw - .076923 * var(--scrollbar-width));width: auto;padding: .8333vw 1.6667vw;font-size: .8722vw;max-width: calc(27.5385vw - .615385 * var(--scrollbar-width));align-items:center}} .c02166.show {transform: translate3d(0, -130%, 0);visibility: inherit;transition-delay: .60s;transition-timing-function:cubic-bezier(.16, 1.08, .38, .98)}@media (min-width: 1024px) {.is-desktop .c02166.show {transform:translate3d(0, -170%, 0)}} .c02168 {color: currentColor;border: none;cursor: pointer;display: block;outline: 0;appearance: none;background: 0 0;flex-shrink: 0;margin-left: 4.2667vw;user-select:none}@media (min-width: 1024px) {.is-desktop .c02168 {margin-left:2.2222vw}} .c02169 {width: 24px;height:24px}@media (min-width: 1024px) {.is-desktop .c02169 {width: 1.6667vw;height:1.6667vw}}#mainArea { clear: both; z-index: 35 } #videoPlayerOuter, #videoPlayer, #videoPlayer_html5_api { width: calc(100vh/5*4); height: 100vh; z-index: 36 } #videoPlayerControls { width: 50px; height: 50px; cursor: pointer; z-index: 50; position: absolute } #videoPlayerControls svg { width: 50px; height: 50px; cursor: pointer } .is-desktop #videoPlayerOverlay { left: 0; top: 0; position: absolute; width: calc(100vh/5*4); height: 100vh; z-index: 40 } .is-mobile #videoPlayerOverlay { left: 0; top: 0; position: absolute; width: 100vw; height: calc(100vw/4*5); z-index: 40 } .is-android #videoPlayerOverlay { left: 0; top: 0; position: absolute; width: 100vw; height: calc(100vw/4*5); z-index: 45 } #videoPlayer { background-image: url(/assets/images/common/loading.png); background-repeat: no-repeat;background-size: 50px 50px; background-position: center; } #gameAreaOuter, #gameArea { text-align: center; height: 100vh; z-index: 200 } #gameArea { width: 100% } #landscapeMsg { top: 28vh; left: 22.5vw; width: 55vw; height: auto; position: absolute } #landscapeImg {width: 55vw; height: auto; } .is-desktop .js-menu-in { height: 30vh } .is-desktop .links { padding-top: 10vh } .is-desktop .menuItem { width: 20vw; height: auto; cursor: pointer } .is-mobile .menuItem { width: 70vw; height: auto; cursor: pointer } .is-desktop .menuItemVerder { margin-top: 4vh } .is-desktop .js-l-opleidingen { width: 30vw; height: auto; margin-top: -5vh; margin-bottom: 5vh } .is-desktop .menuOpleidingen { width: 25vw; height: auto }@media screen and (max-height: 1000px) {.is-desktop .js-l-opleidingen { width: auto; height: 33vh; margin-top: 0vh }}@media screen and (min-height: 1000px) {.is-desktop .js-l-opleidingen { width: 30vw; margin-top: 0vh }} .is-mobile .menuItemVerder { padding-left: -15vw } .is-mobile .menuItemOpnieuw { padding-left: 15vw; padding-top: -5vh } .is-mobile .menuOpleidingen { width: 90vw } .is-mobile .menuBoek { width: 75vw } .is-mobile .menuColofon { width: 60vw } .is-desktop #popupBox { width: 27vw; height: 60vh; left: 36.5vw; top: 20vh; position: absolute; z-index: 1200; background-image: url(/assets/images/svg/popupBg.svg); background-repeat: no-repeat; text-align: center } .is-desktop #popupHeader { width: 22vw; height: auto; left: 3vw; top: -18vh; position: absolute } .is-desktop #popupText { text-align: left; left: 3vw; top: 29vh; position: absolute; font-size: 6em; color: var(--white); font-family: 'GdG', GdG, Arial; line-height: 0.8em} .is-desktop #popupVerderImg { margin-top: 22vh; width: 20vw; height: auto; cursor: pointer } .is-desktop #popupResetImg { width: 25vw; height: 18vh; cursor: pointer } .is-chrome #popupHeader { top: 0 } .is-chrome #popupText { top: 7vh }@media screen and (min-width: 1920px) {.is-desktop #popupHeader { left: 2vw; position: absolute; width: 20vw } .is-desktop #popupVerderImg { margin-top: 21vh; margin-left: -4.5vw; width: 18vw } .is-desktop #popupResetImg { width: 25vw; height: 17vh; margin-left: -3vw; } .is-chrome #popupHeader { top: 2.5vh; left: 1.6vw; width: 20vw } .is-chrome #popupVerderImg { margin-top: 21vh; margin-left: -4vw; width: 18vw } .is-chrome #popupResetImg { width: 25vw; height: 17vh; margin-left: -3vw; }}@media screen and (min-height: 1000px) {.is-desktop #popupHeader { left: 3vw; position: absolute; width: 20vw } .is-desktop #popupVerderImg { margin-top: 21vh; margin-left: -4.5vw; width: 18vw } .is-desktop #popupResetImg { width: 25vw; height: 17vh; margin-left: -3vw; } .is-chrome #popupHeader { top: 2.5vh; left: 3vw; width: 20vw } .is-chrome #popupVerderImg { margin-top: 21vh; margin-left: -2vw; width: 18vw } .is-chrome #popupResetImg { width: 25vw; height: 17vh; margin-left: -1vw; }}@media screen and (max-width: 1680px) {.is-desktop #popupHeader { left: 3.5vw; width: 18vw } .is-desktop #popupText { left: 3vw; font-size: 5em } .is-desktop #popupVerderImg { margin-top: 21vh; margin-left: -2.5vw; width: 18vw } .is-desktop #popupResetImg { width: 23vw; height: 17vh }}@media screen and (max-width: 768px) {.is-mobile #popupBox { width: 90vw; height: 67vh; left: 5vw; top: 16.5vh; position: absolute; z-index: 1200; background-image: url(/assets/images/svg/popupBg.svg); background-repeat: no-repeat; text-align: center } .is-mobile #popupHeader { width: 25vw; height: auto; left: 8vw; top: 0vh; position: absolute } .is-mobile #popupText { text-align: left; left: 5vw; top: 9vh; width: 58vw; position: absolute; font-size: 4em; color: var(--white); font-family: 'GdG', GdG, Arial; line-height: 0.9em} .is-mobile #popupVerderImg { margin-top: 18vh; width: 65vw; height: auto; cursor: pointer } .is-mobile #popupResetImg { width: 80vw; margin-top: -2vh; height: auto; cursor: pointer } .is-desktop #popupBox { width: 90vw; height: 67vh; left: 5vw; top: 16.5vh; } .is-desktop #popupHeader { width: 60vw; height: auto; left: 10vw; top: -25vh } .is-desktop #popupText { text-align: left; left: 5vw; top: 33vh; width: 58vw; font-size: 4em; line-height: 0.9em } .is-desktop #popupVerderImg { margin-top: 20vh; width: 65vw; height: auto } .is-desktop #popupResetImg { width: 80vw; margin-top: 2vh; height: auto }}@media screen and (min-width: 768px) {#progressOuter { width: 75vw; height: 50px; top: 0vh; left: 12vw; position: absolute; z-index: 300 } #prNavBack { text-align: center; width: 4vw; height: 47px; z-index: 302; cursor: pointer; background-color: var(--red) } #prNavNext { text-align: center; width: 4vw; height: 53px; z-index: 302; bottom: 0px; left: 70vw; position: absolute; cursor: pointer; background-color: var(--red) } #prNavFiller { width: 66vw; height: 47px; z-index: 301; background-color: var(--hvdtblue); bottom: 0px; left: 4vw; position: absolute; } #prProgress { top: -8px; position: absolute; padding-top: 13px; min-height: 55px; background-color: var(--hvdtgreen); font-family: 'GdG', GdG, Arial; text-align: center; text-transform: uppercase; font-size: 5em; z-index: 305; cursor: pointer; color: var(--hvdtblue) } #svgNavBackDiv, #svgNavBackSvg { height: 45px; margin-top: 3px; } #svgNavNextDiv, #svgNavNextSvg { height: 45px; margin-top: 3px; margin-left: 1px } .pr33 { width: 22vw; background-color: var(--hvdtgreen) } .pr40 { width: 30vw; background-color: var(--hvdtgreen) } .pr50 { width: 37vw; background-color: var(--hvdtgreen) } .pr66 { width: 44vw; background-color: var(--hvdtgreen) } .pr80 { width: 60vw; background-color: var(--hvdtgreen) } .pr100 { width: 66vw; background-color: var(--hvdtgreen) }}@media screen and (max-width: 768px) {#progressOuter { width: 100vw; height: 50px; top: 83vh; left: 0vw; position: absolute; z-index: 300 } #prNavBack { width: 10vw; height: 35px; top: 15px; left: 0; position: absolute; z-index: 302; cursor: pointer; background-color: var(--red) } #prNavNext { width: 10vw; height: 35px; top: 15px; left: 90vw; position: absolute; z-index: 302; cursor: pointer; background-color: var(--red) } #prNavFiller { width: 80vw; height: 35px; z-index: 301; background-color: #6fb035; top: 15px; left: 10vw; position: absolute; background-color: var(--hvdtblue) } #prProgress { height: 40px; padding-top: 10px; bottom: 0px; position: absolute; font-family: 'GdG', GdG, Arial; text-align: center; text-transform: uppercase; font-size: 2em; z-index: 305; cursor: pointer; color: var(--hvdtblue) } #svgNavBackSvg { width: 10vw; height: 30px; height: 25px; left: 0px; top: 2px; position: absolute } #svgNavNextSvg { width: 10vw; height: 30px; height: 25px; right: 0px; top: 2px; position: absolute } #svgNavBackDiv svg { width: 10vw; height: 30px; height: 25px; left: 0px; top: 2px; position: absolute } #svgNavNextDiv svg { width: 10vw; height: 30px; height: 25px; left: 0px; top: 2px; position: absolute } .pr33 { width: 26vw; background-color: var(--hvdtgreen) } .pr40 { width: 32vw; background-color: var(--hvdtgreen) } .pr50 { width: 40vw; background-color: var(--hvdtgreen) } .pr66 { width: 53vw; background-color: var(--hvdtgreen) } .pr80 { width: 64vw; background-color: var(--hvdtgreen) } .pr100 { width: 80vw; background-color: var(--hvdtgreen) }}@media screen and (min-width: 768px) {#brushGeelW01 { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-lo-geel.svg);left: -200px; width: 150%; height: 240px; z-index: 18; bottom: 0vh; position: absolute } #pijlW01 { width: 200px; height: 150px; right: -50px; top: 40vh; position: absolute; z-index: 150 } .is-desktop #openingW01 { width: 40vw; height: 45vh } #openingW01m { opacity: 0 } #naamOpgevenBox { margin-top: 25vh; margin-bottom: auto; position: relative; height: 50vh; vertical-align: middle } .is-desktop #naamOpgevenBox { margin-top: 15vh; height: 60vh; } #naam { width: 33vw; height: 9.3vh; color: var(--red); border: 0px; left: 5vw; top: 44vh; position: absolute;font-size: 1.8em; padding-left: 2vw; padding-top: 0; background-image: url(/assets/images/svg/naamBg.svg);background-repeat: no-repeat !important; background-size: 100%; background-color: inherit } .naamVraag { font-size: 20pt; color: var(--dark); line-height: normal; padding-bottom: 10px } .naamVraag svg { width: 400px; height: auto; } #naamSubmitPlcmnt { width: 175px; left: 23vw; top: 57vh; position: absolute; height: 145px } .naamSubmit { margin-left: 10px; cursor: pointer; width: 175px; height: auto; border: 0px }}@media screen and (min-width: 1920px) {.is-desktop #openingW01 { left: 6vw; position: absolute } #naam { height: 10.4vh; left: 13vw } #naamSubmitPlcmnt { left: 27vw }}@media screen and (max-width: 768px) {#brushGeelW01 { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-lo-geel.svg);left: -25vw; width: 250%; height: 30vh; z-index: 18; top: 65vh; position: absolute } #pijlW01 { opacity: 0 } #naamOpgevenBox { margin-top: 20; margin-bottom: auto; position: relative; height: 30vh; vertical-align: middle } .is-mobile #openingW01 { opacity: 0 } #openingW01m { opacity: 1; width: 90vw; height: 35vh; left: 0; top: -12vh; position: absolute } #naam { width: 75vw; height: 7vh; border: 0; color: var(--red);font-size: 4em; left: 10vw; top: 13vh; position: absolute; background-image: url(/assets/images/svg/naamBg.svg);background-repeat: no-repeat !important; background-size: 100%; background-color: inherit} .naamVraag { padding-bottom: 10px } .naamVraag svg { width: 75vw; height: auto } #naamSubmitPlcmnt { width: 30vw; height: auto; right: 3vw; top: 16vh; position: absolute } .naamSubmit { cursor: pointer; width: 30vw; height: auto; border: 0px } #svgStartBtnSvg { width: 30vw; height: auto; } .is-android #openingW01m { opacity: 1; width: 90vw; height: 35vh; left: 0; top: -22vh; position: absolute } .is-android #naam { left: 1vw; margin-left: 30px; padding-left: 30px; top: 3vh; } .is-android #naamSubmitPlcmnt { width: 30vw; height: auto; right: 2vw; top: 4vh; position: absolute }@media screen and (min-height: 665px) and (max-height: 724px) {.is-mobile #openingW01m { opacity: 1; width: 90vw; height: 35vh; left: 0; top: -5vh; position: absolute } .is-mobile #naam { left: 1vw; margin-left: 30px; padding-left: 30px; top: 20vh; } .is-mobile #naamSubmitPlcmnt { width: 30vw; height: auto; right: 2vw; top: 21vh; position: absolute }}}@media screen and (min-width: 768px) {#brushGeelS01a { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-lb-geel.svg);left: -112vw; width: 300%; height: 480px; z-index: 18; top: -38vh; position: absolute } #brushGeelS01b { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-ro-geel.svg);right: -110vw; width: 150%; height: 240px; z-index: 18; bottom: -5vh; position: absolute } #plantenbakS01 { width: 200px; height: 130px; left: 3vw; bottom: 5vh; position: absolute; z-index: 150 } #s01niek, #s01niek img { width: 516px; height: 250px; opacity: 1; right: 2vw; bottom: 0; position: absolute; z-index: 125 } #bepaalzelfS01 { width: 30vw; height: 20vh; left: 11vw; top: 9vh; position: absolute; z-index: 150 } #bepaalzelfS01Img { width: 25vw; top: 5vh; left: 0; position: absolute; } #bepaalzelfS01ImgLB, #bepaalzelfS01ImgEB { width: 25vw; top: 6vh; left: 0; position: absolute; } #bepaalZelfText { font-size: 6.5em; height: 8vh; font-family: 'GdG', GdG, Arial; left: 3vw; top: 1.3vh; position: absolute; z-index: 160;background-color: var(--hvdtblue); padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px } #bepaalzelfTextOuter { width: 4vw; height: 8vh; top: 1.7vh; left: 2.8vw; position: absolute; background-color: var(--hvdtgreen); z-index: 150 } #bepaalGraafmachine { width: 5vw; height: auto; left: -1.3vw; top: -2.2vh; position: absolute; z-index: 165 } #P01bepaalZelfText { font-size: 6.5em; height: 8vh; font-family: 'GdG', GdG, Arial; left: 13vw; top: 12.3vh; position: absolute; z-index: 160;background-color: var(--hvdtblue); padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px } #P01bepaalzelfTextOuter { width: 10vw; height: 8vh; top: 12.7vh; left: 12.8vw; position: absolute; background-color: var(--hvdtgreen); z-index: 150 }@media screen and (max-height: 999px){#bepaalZelfText { top: 1vh; left: 7vw } #P01bepaalZelfText { top: 13vh; left: 13vw } #P01bepaalzelfTextOuter { top: 13.7vh; left: 13.3vw }}@media screen and (max-width: 1920px){.is-desktop #bepaalZelfText { top: 1.2vh; left: 2.6vw } .is-chrome #bepaalZelfText { top: 1.2vh; left: 3.1vw } .is-desktop #P01bepaalZelfText { top: 13.2vh; left: 12.6vw } .is-chrome #P01bepaalZelfText { top: 13.2vh; left: 13.1vw } .is-desktop #P01bepaalzelfTextOuter { top: 13.7vh; left: 13vw } .is-chrome #P01bepaalzelfTextOuter { top: 13.7vh; left: 13.6vw }}@media screen and (max-width: 1800px){#bepaalZelfText { top: 16.2vh; left: 13.2vw } #P01bepaalZelfText { top: 13.2vh; left: 13.2vw } #P01bepaalzelfTextOuter { top: 13.7vh; left: 13.8vw }} #specialismesBox { top: 32vh; left: 8vw; position: absolute; width: 675px; height: 450px; z-index: 200} .sb0a { width: 305px; height: 222px; float: left; padding-left: 20px; padding-right: 25px; padding-bottom: 15px; cursor: pointer; z-index: 210 } .sb0b { width: 305px; height: 222px; float: left; padding-left: 25px; padding-bottom: 15px; cursor: pointer; z-index: 210 } .sb1 { top: 0px; left: 0px; position: relative; z-index: 299 } .sb1 svg, .sb2 svg { height: 200px; } .sb2, .sb2b {width: 300px; height: 60px; top: -75px; left: -15px; position: relative; z-index: 301 } .sb2bg { left: 0px; top: -70px; position: absolute; z-index: 302 } .sb2bbgActive { left: 0px; top: -70px; position: absolute; z-index: 302 } .sb2bbg { left: 0px; top: 0px; position: absolute; z-index: 302 } .sb2txt, .sb2btxt{ font-family: 'GdG', GdG; font-size: 22pt; text-transform: uppercase; width: 300px; text-align: center; left: 0px; top: 15px; position: absolute; z-index: 320 } #behaaldBoomSvg { height: 200px; top: -150px; margin-left: auto; margin-right: auto; position: relative; z-index: 325 } #behaaldDakSvg {height: 140px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 325 } #behaaldIntSvg {height: 130px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 325 } #behaaldHovSvg {height: 130px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 325 }}@media screen and (max-width: 768px) {#brushGeelS01a { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-lb-geel.svg);left: -112vw; width: 300vw; height: auto; z-index: 18; top: -38vh; position: absolute } #brushGeelS01b { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-ro-geel.svg);right: -110vw; width: 150vw; height: auto; z-index: 18; bottom: -5vh; position: absolute } #bloemS01 {opacity: 0 } #plantenbakS01 { opacity: 0 } .is-desktop #bepaalzelfS01 { display: none } .is-desktop #s01niek, .is-desktop #s01niek img { opacity: 0 } .is-mobile #s01niek, .is-mobile #s01niek img { opacity: 0 } #bepaalzelfS01 { width: 95vw; height: 20vh; left: 4vw; top: -21vh; position: absolute; z-index: 150 } #bepaalzelfS01Img { width: 80vw; height: auto; top: 4vh; left: 5vw; position: absolute; } #bepaalzelfS01ImgLB, #bepaalzelfS01ImgEB { width: 80vw; height: auto; top: 4vh; left: 6vw; position: absolute; } #bepaalZelfText { font-size: 4.5em; height: 6vh; font-family: 'GdG', GdG, Arial; left: 13vw; top: 2.4vh; position: absolute; z-index: 160;background-color: var(--hvdtblue); padding-left: 15px; padding-right: 15px; padding-bottom: 0px } #bepaalzelfTextOuter { width: 18vw; height: 6vh; top: 2.9vh; left: 11.8vw; position: absolute; background-color: var(--hvdtgreen); z-index: 150 } #P01bepaalZelfText { font-size: 4.5em; height: 6vh; font-family: 'GdG', GdG, Arial; left: 13vw; top: 11.4vh; position: absolute; z-index: 160;background-color: var(--hvdtblue); padding-left: 15px; padding-right: 15px; padding-bottom: 0px } #P01bepaalzelfTextOuter { width: 18vw; height: 6vh; top: 16.9vh; left: 10.8vw; position: absolute; background-color: var(--hvdtgreen); z-index: 150 } .is-mobile #bepaalGraafmachine { width: 15vw; height: auto; left: -1.3vw; top: -2.8vh; position: absolute; z-index: 165 } .is-desktop #specialismesBox { top: -28vh; left: 0vw; position: absolute; width: 100vw; height: auto } .is-mobile #specialismesBox {top: -4vh; left: 0vw; position: absolute; width: 100vw; height: auto } .is-android #specialismesBox { top: -2vh; left: 0vw; position: absolute; width: 100vw; height: auto }@media screen and (min-height: 665px) and (max-height: 724px) {.is-mobile #specialismesBox { top: 2vh; left: 0vw; position: absolute; width: 100vw; height: auto }} .sb0a { width: 50vw; height: 20vh; float: left; padding-left: 1vw; cursor: pointer } .sb0b { width: 50vw; height: 20vh; float: left; padding-left: 2vw; cursor: pointer } .sb1 { top: 0px; left: 0px; position: relative; z-index: 99 } .sb1 svg, .sb2 svg, .sb2b svg { width: 48vw; } .sb2, .sb2b {width: 46vw; height: 10vh; top: -55px; left: 1vw; position: relative; z-index: 101 } .sb2bg { left: 0; top: -50px; position: absolute; z-index: 102 } .sb2bbgActive { left: 0px; top: -50px; position: absolute; z-index: 102 } .sb2bbg { left: 0; top: -50px; position: absolute; z-index: 102 } .is-mobile .sb2txt, .is-mobile .sb2btxt{ font-family: 'GdG', GdG; font-size: 2.3em; text-transform: uppercase; width: 46vw; text-align: center; left: 0px; top: 2.2vh; position: absolute; z-index: 120 } .is-desktop .sb2txt, .is-desktop .sb2btxt{ font-family: 'GdG', GdG; font-size: 4em; text-transform: uppercase; width: 46vw; text-align: center;left: 0px; top: -2.5vh; position: absolute; z-index: 120 } .is-desktop #behaaldBoomSvg { height: 200px; top: -150px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-desktop #behaaldDakSvg {height: 10vh; top: -10vh; z-index: 125 } .is-desktop #behaaldIntSvg {height: 130px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-desktop #behaaldHovSvg {height: 130px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-desktop #behaaldBoomSvg svg { height: 10vh; width: auto; left: -3vw; top: 2.5vh; position: absolute } .is-desktop #behaaldDakSvg svg {height: 10vh; width: auto; left: 0; top: -12vh; position: absolute } .is-desktop #behaaldIntSvg svg {height: 10vh; width: auto; left: -2vw; top: 0; position: absolute } .is-desktop #behaaldHovSvg svg {height: 10vh; width: auto; left: -4vw; top: 0; position: absolute } .is-mobile #behaaldBoomSvg { height: 200px; top: -150px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-mobile #behaaldDakSvg {height: 10vh; top: -10vh; z-index: 125 } .is-mobile #behaaldIntSvg {height: 130px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-mobile #behaaldHovSvg {height: 100px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-mobile #behaaldBoomSvg svg { height: 9vh; width: auto; left: -15vw; top: 11vh; position: absolute } .is-mobile #behaaldDakSvg svg {height: 10vh; width: auto; left: -16vw; top: -9.5vh; position: absolute } .is-mobile #behaaldIntSvg svg {height: 10vh; width: auto; left: -16vw; top: 7vh; position: absolute } .is-mobile #behaaldHovSvg svg {height: 11vh; width: auto; left: -13.5vw; top: 7vh; position: absolute } .is-android #behaaldBoomSvg { width: 45vw; height: 250px; top: -150px; left: 0px; z-index: 125 } .is-android #behaaldDakSvg {height: 10vh;top: -25vh; z-index: 125 } .is-android #behaaldIntSvg {height: 130px; top: -65px; left: 0; position: relative; z-index: 125 } .is-android #behaaldHovSvg {height: 130px; top: -65px; left: 0; position: relative; z-index: 125 } .is-android #behaaldBoomSvg svg { height: 15vh; width: 35vw; left: 4vw; top: 11vh; position: absolute } .is-android #behaaldDakSvg svg {height: 10vh; width: 30vw; left: 7.5vw; top: -8vh; position: absolute } .is-android #behaaldIntSvg svg {height: 9vh; width: auto; left: -18vw; top: 1vh; position: absolute } .is-android #behaaldHovSvg svg {height: 10vh; width: auto; left: -16vw; top: 1.5vh; position: absolute }@media screen and (min-height: 665px) and (max-height: 724px) {.is-mobile #behaaldBoomSvg { height: 200px; top: -150px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-mobile #behaaldDakSvg {height: 10vh; top: -10vh; z-index: 125 } .is-mobile #behaaldIntSvg {height: 130px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-mobile #behaaldHovSvg {height: 100px; top: -125px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-mobile #behaaldBoomSvg svg { height: 9vh; width: auto; left: -18vw; top: 14vh; position: absolute } .is-mobile #behaaldDakSvg svg {height: 10vh; width: auto; left: -17vw; top: -8vh; position: absolute } .is-mobile #behaaldIntSvg svg {height: 10vh; width: auto; left: -17vw; top: 9vh; position: absolute } .is-mobile #behaaldHovSvg svg {height: 11vh; width: auto; left: -14.5vw; top: 9vh; position: absolute } .is-android #behaaldBoomSvg { width: 45vw; height: 250px; top: -150px; left: 0px; z-index: 125 } .is-android #behaaldDakSvg {height: 10vh;top: -25vh; z-index: 125 } .is-android #behaaldIntSvg {height: 130px; top: -65px; left: 0; position: relative; z-index: 125 } .is-android #behaaldHovSvg {height: 130px; top: -65px; left: 0; position: relative; z-index: 125 } .is-android #behaaldBoomSvg svg { height: 15vh; width: 35vw; left: 4vw; top: 9vh; position: absolute } .is-android #behaaldDakSvg svg {height: 10vh; width: 30vw; left: 7.5vw; top: -8vh; position: absolute } .is-android #behaaldIntSvg svg {height: 9vh; width: auto; left: 11vw; top: 0; position: absolute } .is-android #behaaldHovSvg svg {height: 10vh; width: auto; left: 12vw; top: 0; position: absolute }}}@media screen and (min-width: 3000px){#specialismesBox { top: 32vh; left: 8vw; position: absolute; width: 1350px; height: 900px; z-index: 200} .sb0a { width: 610px; height: 444px; float: left; padding-left: 1vw; cursor: pointer } .sb0b { width: 610px; height: 444px; float: left; padding-left: 2vw; cursor: pointer } .sb1 { top: 0px; left: 0px; position: relative; z-index: 99 } .sb1 svg, .sb2 svg, .sb2b svg { width: 600px; } .sb2 {width: 500px; height: 100px; top: -120px; left: -30px; position: relative; z-index: 101 } .sb2b {width: 500px; height: 100px; top: -70px; left: -30px; position: relative; z-index: 101 } .sb2bg { left: 0; top: -50px; position: absolute; z-index: 102 } .sb2bbgActive { left: 0px; top: -50px; position: absolute; z-index: 102 } .sb2bbg { left: 0; top: -50px; position: absolute; z-index: 102 } .sb2txt, .sb2btxt{ font-family: 'GdG', GdG; font-size: 8em; text-transform: uppercase; width: 600px; text-align: center; left: 0px; top: 20px; position: absolute; z-index: 320 } .is-desktop .sb2txt { font-family: 'GdG', GdG; font-size: 8em; text-transform: uppercase; width: 610px; text-align: center;left: 0px; top: 20px; position: absolute; z-index: 120 } .is-desktop .sb2btxt{ font-family: 'GdG', GdG; font-size: 8em; text-transform: uppercase; width: 610px; text-align: center;left: 0px; top: -25px; position: absolute; z-index: 120 } .is-desktop #behaaldHovSvg {height: 200px; top: -150px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-desktop #behaaldHovSvg svg {height: 200px; width: auto; left: 150px; top: -125px; position: absolute } .is-desktop #behaaldDakSvg {height: 450px; top: -150px; z-index: 125 } .is-desktop #behaaldDakSvg svg {height: 450px; width: auto; left: 140px; top: -225px; position: absolute } .is-desktop #behaaldBoomSvg svg { height: 350px; width: auto; left: 125px; top: 0px; position: absolute } .is-desktop #behaaldBoomSvg { height: 350px; top: -325px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } .is-desktop #behaaldIntSvg svg {height: 150px; width: auto; left: 150px; top: -50px; position: absolute } .is-desktop #behaaldIntSvg {height: 150px; top: -185px; margin-left: auto; margin-right: auto; position: relative; z-index: 125 } #bepaalZelfText { font-size: 13em; height: 130px; font-family: 'GdG', GdG, Arial; left: 3vw; top: 1.3vh; position: absolute; z-index: 160;background-color: var(--hvdtblue); padding-top: 40px; padding-left: 30px; padding-right: 30px; padding-bottom: 0px } #bepaalzelfTextOuter { width: 4vw; height: 130px; top: 1.7vh; left: 2.8vw; position: absolute; background-color: var(--hvdtgreen); z-index: 150 } #P01bepaalZelfText { font-size: 13em; height: 130px; font-family: 'GdG', GdG, Arial; left: 13vw; top: 14.3vh; position: absolute; z-index: 160;background-color: var(--hvdtblue); padding-top: 40px; padding-left: 30px; padding-right: 30px; padding-bottom: 0px } #P01bepaalzelfTextOuter { width: 4vw; height: 130px; top: 15.7vh; left: 11.8vw; position: absolute; background-color: var(--hvdtgreen); z-index: 150 }}@media screen and (min-width: 768px) {#gelijkI01 { width: 50vw; height: 85vh; top: 10vh; margin-left: auto; margin-right: auto; position: relative; z-index: 15 } #gelijkI01img { left: 0; top: 0; position: relative; width: 100%; height: auto; z-index: 16; cursor: pointer } #brushGroenI01 { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-lo-groen.svg); left: 47vw; width: 125vw; height: 20vh; z-index: 18; bottom: 2vh; position: absolute }@media screen and (max-width: 1920px) {#gelijkI01 { top: 7vh; left: -5vw }}}@media screen and (max-width: 768px) {.is-mobile #gelijkI01 { width: 90vw; height: auto; top: 3vh; margin-left: auto; margin-right: auto; position: relative; z-index: 150 } .is-mobile #gelijkI01 img { left: 0px; top: 0px; position: relative; cursor: pointer } .is-mobile #brushGroenI01 { opacity: 0 } .is-android #gelijkI01 { width: 90vw; height: auto; top: -3vh; margin-left: auto; margin-right: auto; position: relative; z-index: 150 } .is-android #gelijkI01 img { left: 0px; top: 0px; position: relative; cursor: pointer } .is-android #brushGroenI01 { opacity: 0 }@media screen and (min-height: 665px) and (max-height: 724px) {.is-mobile #gelijkI01 { top: 10vh; margin-left: auto; margin-right: auto; position: relative }} .is-desktop #brushGroenI01 { opacity: 0 } .is-desktop #gelijkI01 { width: 90vw; height: 20vh; top: -12vh; left: 5vw; position: absolute; z-index: 150 } .is-desktop #gelijkI01 img { left: 0px; top: 0vh; position: absolute; cursor: pointer }} .goedfout { top: 10vh; position: relative; padding-bottom: 30px; z-index: 959 } .is-mobile .goedfout { width: 98vw; height: auto; top: -9vh; left: 0; position: absolute } #v01Goed img, #v02Goed img, #v01Fout img, #v02Fout img { width: auto; height: 225px; } .is-mobile #v01Goed img, .is-mobile #v02Goed img, .is-mobile #v01Fout img, .is-mobile #v02Fout img { left: 1%; position: relative; width: 98%; height: auto; } #v01Gelijk, #v02Gelijk { width: 275px; height: auto; top: 31vh; position: relative; margin-left: auto; margin-right: auto; z-index: 150; cursor: pointer } .is-mobile #v01Gelijk, .is-mobile #v02Gelijk { opacity: 0 } .vAntwoordTxt { line-height: 120% } .vAntwoordTxtFout { line-height: 120% }@media screen and (min-width: 768px) {#headerV01, #headerV02 { width: 35vw; height: 25vh; margin-left: auto; margin-right: auto; top: 10vh; position: relative; padding-right: 5vw; padding-bottom: 50px } #textV01, #textV02 { width: 25vw; left: 3vw; top: 3vh; position: absolute } .vAntwoord { width: 580px; height: 104px; margin-left: auto; margin-right: auto; position: relative; cursor: pointer; margin-bottom: 25px } .vAntwoordGegeven { width: 580px; height: 104px; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 20px } .vAntwoordA { top: 6vh } .vAntwoordB { top: 6vh } .vAntwoordC { top: 6vh } .vAntwoordTxt { text-align: left; left: 65px; top: -75px; width: 450px; position: relative; font-size: 4em; font-weight: bold; color: var(--hvdtblue) } .vAntwoordTxtFout { text-align: left; left: 65px; top: -75px; width: 450px; position: relative; font-size: 4em; font-weight: bold; color: #a6a6a6 }@media screen and (max-width: 1680px){.is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 30vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 19vw; top: 75vh; position: absolute }}@media screen and (max-width: 1921px){.is-desktop .goedfout { left: -5vw; top: 12vh; position: relative; padding-bottom: 30px; z-index: 959 } .is-desktop #v01Goed img, .is-desktop #v02Goed img, .is-desktop #v01Fout img, .is-desktop #v02Fout img { width: auto; height: 175px; } .is-desktop #V01Box, .is-desktop #V02Box { height: 20vh; top: 12vh; left: 10vw; position: absolute } .is-desktop #textV01, .is-desktop #textV02 { width: 25vw; height: auto } .is-desktop .vAntwoorden, .is-desktop .vAntwoordenGegeven { top: 27vh; left: 10vw; position: absolute; width: 30vw; height: 10vh; } .is-chrome .vAntwoordA { top: 8vh } .is-chrome .vAntwoordB { top: 8vh } .is-chrome .vAntwoordC { top: 8vh } .is-desktop .vAntwoordTxt { cursor: pointer; text-align: left; left: 65px; top: -75px; width: 17vw; position: relative; font-size: 3em; font-weight: bold; color: var(--hvdtblue) } .is-desktop .vAntwoordTxtFout { text-align: left; left: 65px; top: -75px; width: 17vw; position: relative; font-size: 3em; font-weight: bold; color: #a6a6a6 }@media screen and (max-height: 950px){.is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 27vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 19vw; top: 64vh; position: absolute }}@media screen and (min-height: 950px){.is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 27vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 19vw; top: 72vh; position: absolute }} .is-desktop #terugMetDroneF01 { top: 10vh; left: 15vw; position: absolute; height: 40vh; width: auto; cursor: pointer; z-index: 150 } .is-desktop #ikweetgenoegF01 {top: 50vh; left: 15vw; position: absolute; height: 35vh; width: auto; cursor: pointer; z-index: 150 } .is-desktop #terugMetDroneF01 svg { height: 40vh; width: auto; cursor: pointer } .is-desktop #ikweetgenoegF01 img { height: 35vh; width: auto; cursor: pointer } .is-desktop #vindOplGdGEA01 { width: 30vw; height: auto; left: 12vw; top: 15vh; position: relative } .is-desktop #vindOplGdGEA01 img { width: 30vw; height: auto; } .is-desktop #pet01 { width: 30vw; height: auto; left: 12vw; top: 30vh; position: relative } .is-desktop #pet01 img { width: 30vw; height: auto; }}@media screen and (min-width: 1922px){.is-desktop .goedfout { left: -5vw; top: 14vh; position: relative; padding-bottom: 30px; z-index: 959 } .is-desktop #v01Goed img, .is-desktop #v02Goed img, .is-desktop #v01Fout img, .is-desktop #v02Fout img { width: auto; height: 175px; } .is-desktop #V01Box, .is-desktop #V02Box { height: 20vh; top: 12vh; left: 10vw; position: absolute } .is-desktop #textV01, .is-desktop #textV02 { width: 25vw; height: auto } .is-desktop .vAntwoorden, .is-desktop .vAntwoordenGegeven { top: 29vh; left: 10vw; position: absolute; width: 30vw; height: 10vh; } .is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 31vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 19vw; top: 72vh; position: absolute } .is-chrome .vAntwoordA { top: 8vh } .is-chrome .vAntwoordB { top: 8vh } .is-chrome .vAntwoordC { top: 10vh } .is-desktop .vAntwoordTxt { cursor: pointer; text-align: left; left: 65px; top: -75px; width: 17vw; position: relative; font-size: 3em; font-weight: bold; color: var(--hvdtblue) } .is-desktop .vAntwoordTxtFout { text-align: left; left: 65px; top: -75px; width: 17vw; position: relative; font-size: 3em; font-weight: bold; color: #a6a6a6 } .is-desktop #terugMetDroneF01 { top: 10vh; left: 15vw; position: absolute; height: 40vh; width: auto; cursor: pointer; z-index: 150 } .is-desktop #ikweetgenoegF01 {top: 50vh; left: 15vw; position: absolute; height: 35vh; width: auto; cursor: pointer; z-index: 150 } .is-desktop #terugMetDroneF01 svg { height: 40vh; width: auto; cursor: pointer } .is-desktop #ikweetgenoegF01 img { height: 35vh; width: auto; cursor: pointer } .is-desktop #vindOplGdGEA01 { width: 30vw; height: auto; left: 12vw; top: 15vh; position: relative } .is-desktop #vindOplGdGEA01 img { width: 30vw; height: auto; } .is-desktop #pet01 { width: 30vw; height: auto; left: 12vw; top: 25vh; position: relative } .is-desktop #pet01 img { width: 30vw; height: auto; }}@media screen and (max-height: 850px){.is-mobile .goedfout { width: 80vw; height: auto; top: -9vh; left: -1vw; position: absolute } .is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 15vw; top: 32vh; position: absolute } .is-desktop .vAntwoord { width: 480px; height: 86px; margin-left: auto; margin-right: auto; position: relative; cursor: pointer; margin-bottom: 25px } .is-desktop .vAntwoordGegeven { width: 480px; height: 86px; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 20px } .is-desktop .vAntwoordA { top: 4vh } .is-desktop .vAntwoordB { top: 4vh } .is-desktop .vAntwoordC { top: 2vh } .is-desktop .vAntwoordTxt { text-align: left; left: 65px; top: -75px; width: 450px; position: relative; font-size: 3em; font-weight: bold; color: var(--hvdtblue) } .is-desktop .vAntwoordTxtFout { text-align: left; left: 65px; top: -75px; width: 450px; position: relative; font-size: 3em; font-weight: bold; color: #a6a6a6 }}@media screen and (max-height: 900px){.is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 32vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 19vw; top: 76vh; position: absolute }}@media screen and (max-height: 950px){.is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 32vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 19vw; top: 76vh; position: absolute }}@media screen and (min-height: 900px) and (max-height: 950px){.is-mobile .goedfout { width: 80vw; height: auto; top: -9vh; left: -1vw; position: absolute } .is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 19vw; top: 73vh; position: absolute }}}@media screen and (min-width: 3000px){.is-desktop .goedfout { left: -5vw; top: 14vh; position: relative; padding-bottom: 30px; z-index: 959 } .is-desktop #v01Goed img, .is-desktop #v02Goed img, .is-desktop #v01Fout img, .is-desktop #v02Fout img { width: auto; height: 350px; } .vAntwoord {width: 800px; height: 140px; margin-left: 2.5vw; position: relative; cursor: pointer } .vAntwoordGegeven { width: 800px; height: 140px; margin-left: 2.5vw; position: relative; } .vAntwoordGegeven svg { width: 800px; height: auto; top: 0px; left: 0; position: absolute } .vAntwoord img { width: 800px; height: auto; top: 0; left: 0; position: absolute } .is-desktop .vAntwoorden, .is-desktop .vAntwoordenGegeven { left: 12vw; top: 35vh; position: absolute; width: 800px; height: 800px } .is-desktop .vAntwoordA { top: 0 } .is-desktop .vAntwoordB { top: 2vh } .is-desktop .vAntwoordC { top: 4vh } .is-chrome .vAntwoordA { top: 0 } .is-chrome .vAntwoordB { top: 2vh } .is-chrome .vAntwoordC { top: 4vh } .is-desktop .vAntwoordTxt { cursor: pointer; text-align: left; left: 85px; top: 50px; width: 500px; position: relative; font-size: 7em; font-weight: bold; color: var(--hvdtblue) } .is-desktop .vAntwoordTxtFout { text-align: left; left: 85px; top: 30px; width: 500px; position: relative; font-size: 7em; font-weight: bold; color: #a6a6a6 } #v01Gelijk, #v02Gelijk { width: 550px; height: auto; top: 31vh; position: relative; margin-left: auto; margin-right: auto; z-index: 150; cursor: pointer } .is-desktop #v01Gelijk, .is-desktop #v02Gelijk { left: 16vw; top: 31vh; position: absolute } .is-chrome #v01Gelijk, .is-chrome #v02Gelijk { left: 16vw; top: 72vh; position: absolute }}@media screen and (max-width: 768px) {#headerV01, #headerV02 { width: 95vw; height: 25vh; margin-left: auto; margin-right: auto; top: 0vh; position: relative; padding-right: 5vw; padding-bottom: 50px } #textV01, #textV02 { width: 79vw; left: 5vw; top: 4vh; position: absolute } .is-mobile #V01Box, .is-mobile #V02Box { height: 20vh; top: 12vh; left: 5vw; position: absolute } .is-mobile .vAntwoorden {top: 2vh; left: 0; position: absolute } .is-mobile .vAntwoordenGegeven {top: 1vh; left: 0; position: absolute } .is-android .vAntwoorden { top: 2vh; left: 0; position: absolute } .is-desktop .vAntwoorden { top: -22vh; left: 0; position: absolute }@media screen and (max-height: 615px) {.is-mobile .goedfout { top: -22vh; }}@media screen and (min-height: 665px) and (max-height: 724px) {.is-mobile .goedfout { top: -4vh; }} .vAntwoord {width: 95vw; height: 9.5vh; margin-left: 2.5vw; margin-right: 2.5vw; position: relative; cursor: pointer } .vAntwoordGegeven { width: 95vw; height: 9.5vh; margin-left: 2.5vw; margin-right: 2.5vw; position: relative; } .vAntwoordGegeven svg { width: 95vw; height: auto; top: -5vh; left: 0; position: absolute } .vAntwoord img { width: 95vw; height: auto; top: 0; left: 0; position: absolute } .is-desktop .vAntwoordA { top: 0 } .is-desktop .vAntwoordB { top: 2vh } .is-desktop .vAntwoordC { top: 4vh } .is-mobile .vAntwoordA { top: 0 } .is-mobile .vAntwoordB { top: 0.7vh } .is-mobile .vAntwoordC { top: 0.7vh } .is-android .vAntwoordA { top: 0 } .is-android .vAntwoordB { top: 0.7vh } .is-android .vAntwoordC { top: 0.7vh } .vAntwoordTxt { width: 450px; text-align: left; left: 13vw; top: 2.5vh; line-height: 120%; position: relative; font-size: 2em; font-weight: bold; color: var(--hvdtblue) } .vAntwoordTxtFout { width: 450px; text-align: left; left: 13vw; top: 2.5vh; line-height: 120%; position: relative; font-size: 2em; font-weight: bold; color: #a6a6a6 } .is-desktop #v01Gelijk, .is-desktop #v02Gelijk { opacity: 0; z-index: 4500 }}@media screen and (min-width: 768px) {#terugMetDroneF01 { top: 20vh; position: relative; height: 20vh; cursor: pointer; z-index: 150 } #ikweetgenoegF01 {top: 30vh; position: relative; height: 50vh; cursor: pointer; z-index: 150 } #ikweetgenoegF01 img { height: 50vh; width: auto; cursor: pointer }}@media screen and (min-width: 1768px) {#terugMetDroneF01 { top: 20vh; position: relative; height: 15vh; cursor: pointer; z-index: 150 } #ikweetgenoegF01 {top: 30vh; position: relative; height: 40vh; cursor: pointer; z-index: 150 } #ikweetgenoegF01 img { height: 25vh; width: auto; cursor: pointer }}@media screen and (max-width: 768px) {.is-mobile #terugMetDroneF01 { left: 10vw; top: -10vh; position: absolute; width: 80vw; height: 20vh; cursor: pointer; z-index: 150 } .is-mobile #ikweetgenoegF01 {left: 5vw; top: 10vh; position: absolute; width: 90vw; height: 20vh; cursor: pointer; z-index: 150 } .is-mobile #ikweetgenoegF01 img { width: 90vw; height: auto; cursor: pointer }@media screen and (max-height: 615px) {.is-mobile #terugMetDroneF01 { left: 10vw; top: -24vh; position: absolute; width: 80vw; height: 20vh; cursor: pointer; z-index: 150 } .is-mobile #ikweetgenoegF01 {left: 5vw; top: -6vh; position: absolute; width: 90vw; height: 20vh; cursor: pointer; z-index: 150 } .is-mobile #ikweetgenoegF01 img { width: 90vw; height: auto; cursor: pointer }} .is-desktop #terugMetDroneF01 { top: -15vh; left: 0px; position: absolute; height: 20vh; cursor: pointer; z-index: 150 } .is-desktop #ikweetgenoegF01 {top: -10vh; left: 0px; position: absolute; height: 20vh; cursor: pointer; z-index: 150 } .is-desktop #ikweetgenoegF01 img { height: 20vh; width: auto; cursor: pointer }}@media screen and (min-width: 3000px) {.is-desktop #terugMetDroneF01 { top: 10vh; left: 15vw; position: absolute; height: 450px; width: 600px; cursor: pointer; z-index: 150 } .is-desktop #terugMetDroneF01 svg { width: 600px; height: 600px; cursor: pointer } .is-desktop #ikweetgenoegF01 {top: 50vh; left: 15vw; position: absolute; height: 35vh; width: auto; cursor: pointer; z-index: 150 } .is-desktop #ikweetgenoegF01 img { height: 35vh; width: auto; cursor: pointer }} #brushGeelEA01 { background-repeat: no-repeat; background-image: url(/assets/images/svg/balk-lo-geel.svg);left: -200px; width: 150%; height: 240px; z-index: 18; bottom: 0vh; position: absolute }@media screen and (min-width: 768px) {#vindOplGdGEA01 { top: 15vh; position: relative; height: 70vh; cursor: pointer } #vindOplGdGEA01 img { height: 70vh; width: auto } #pet01 { top: 35vh; position: relative; height: 70vh; cursor: pointer } #pet01 img { height: 70vh; width: auto }}@media screen and (max-width: 768px) {.is-desktop #vindOplGdGEA01 { top: -25vh; position: absolute; height: 50vh; cursor: pointer } .is-mobile #vindOplGdGEA01 { left: 10vw; top: 0vh; position: absolute; width: 80vw; height: auto; cursor: pointer } .is-desktop #pet01 { top: -25vh; position: absolute; height: 50vh; cursor: pointer } .is-mobile #pet01 { left: 5vw; top: 4vh; position: absolute; width: 90vw; height: auto; cursor: pointer } .is-mobile #P01bepaalzelfText { display: none } .is-mobile #P01bepaalzelfTextOuter { display: none }@media screen and (max-height: 615px) {.is-mobile #vindOplGdGEA01 { left: 10vw; top: -7vh; position: absolute; width: 80vw; height: auto; cursor: pointer } .is-mobile #pet01 { left: 5vw; top: -8vh; position: absolute; width: 80vw; height: auto; cursor: pointer }}}