html {font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%}body {margin: 0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {display: block}ol, ul { list-style:none }dd, dl, dt, form, ol, ul { margin: 0; padding:0 }audio,canvas,progress,video {display: inline-block}audio:not([controls]) {display: none;height: 0}progress {vertical-align: baseline}template,[hidden] {display: none}a {background-color: transparent;-webkit-text-decoration-skip: objects}a:active,a:hover {outline-width: 0}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted}b,strong {font-weight: inherit}b,strong {font-weight: bolder}dfn {font-style: italic}h1 {font-size: 2em;margin: 0.67em 0}mark {background-color: #ff0;color: #000}small {font-size: 80%}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline}sub {bottom: -0.25em}sup {top: -0.5em}img {border-style: none}svg:not(:root) {overflow: hidden}code,kbd,pre,samp {font-family: monospace, monospace;font-size: 1em}figure {margin: 1em 40px}hr {box-sizing: content-box;height: 0;overflow: visible}button,input,select,textarea {font: inherit;margin: 0}optgroup {font-weight: bold}button,input {overflow: visible}button,select {text-transform: none}button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText}fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal}textarea {overflow: auto}[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance: none}::-webkit-input-placeholder {color: inherit;opacity: 0.54}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit}.row { width: var(--fullWidth); height: auto !important; clear: both; float: none } .col-3 { width: calc(var(--fullWidth)/3); float: left } .col-9 { width: calc((var(--fullWidth)/3)*2); float: left } .col-12 { width: var(--fullWidth); float: left } .fullWidth, .imgFull { width: var(--fullWidth) } .halfWidth, .imgHalf { width: var(--halfWidth); float: left } .halfWidthPad25 { width: calc(var(--halfWidth)-50px); padding: 25px; } .quarterWidth, .quartWidth, .imgQuart { width: var(--quartWidth); float: left } .quarterWidthPh10 { width: calc(var(--quartWidth) - 20px); float: left } .halfWidthPh10 { width: calc(var(--halfWidth) - 20px); float: left } .w900 { width: var(--w900); margin-left: auto; margin-right: auto } .w450 { width: var(--w450); margin-left: auto; margin-right: auto } .w450f { width: var(--w450); float: left } .w400 { width: var(--w400); margin-left: auto; margin-right: auto } .w390 { width: var(--w390); } .w380 { width: var(--w380); } .w400ph15 { width: calc(var(--w400) - 30px); margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .w400ph10 { width: calc(var(--w400) - 20px); margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; } .mobile .w400ph15 { width: calc(var(--w400) - 30px); margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .w400f { width: var(--w400); float: left } .w300 { width: 300px; } .w290 { width: 290px; } .mobile .w290 { width: calc(var(--w400) - 30px); } .w260 { width: var(--w260) } .w260f { width: var(--w260) } .w250 { width: var(--w250) } .w250f { width: var(--w250) } .w200 { width: var(--w200) } .w200f { width: var(--w200); float: left } .w210 { width: var(--w210) } .w210f { width: var(--w210); float: left } .w190 { width: var(--190) } .w190f { width: var(--190); float: left } .w175 { width: 175px } .w175f { width: 175px; float: left } .w170 { width: 170px } .w170f { width: 170px; float: left } .w160 { width: 160px } .w160f { width: 160px; float: left } .w155 { width: 155px } .mobile .w155 { width: 115px } .w155f { Width: 155px; float: left } .w150 { width: 150px } .w150f { Width: 150px; float: left } .w145 { width: 145px } .mobile .w145 { width: 110px } .w145f { Width: 145px; float: left } .w130 { width: 130px } .w130f { Width: 130px; float: left } .w120 { width: 120px } .w120f { Width: 120px; float: left } .w100 { width: 100px } .w100f { Width: 100px; float: left } .h100 { height: 100px; } .h125 { height: 125px; } .h140 { height: 140px; } .h145 { height: 145px; } .h150 { height: 150px; } .h165 { height: 165px; } .h170 { height: 170px; } .h180 { height: 180px; } .h190 { height: 190px; } .h220 { height: 220px; } .h200 { height: 200px; } .h250 { height: 250px; } .h520 { height: 520px; } .h500 { height: 500px; } .h600 { height: 600px; } .h490 { height: 490px; } .h475 { height: 475px; } .h400 { height: 400px; } .h425 { height: 425px; } .h450 { height: 450px; } .h950 { height: 950px; } .h850 { height: 850px; } .desktop .pt30vw { padding-top: calc(15vw - 63px) } .mobile .pt30vw { padding-top: calc(15vw + 50px) } .spacer0 { height: 0px; clear: both } .spacer10 { height: 10px; clear: both } .spacer15 { height: 15px; clear: both } .spacer25 { height: 25px; clear: both } .spacer50 { height: 50px; clear: both } .spacer75 { height: 75px; clear: both } .spacer100 { height: 100px; clear: both } .spacer125 { height: 125px; clear: both } .spacer200 { height: 200px; clear: both } .spacer30 { height: 30px; clear: both } .spacer35 { height: 35px; clear: both } .spacer40 { height: 40px; clear: both } .spacer45 { height: 45px; clear: both } .spacer5 { height: 5px; clear: both } .padding0 { padding: 0px } .padding5 { padding: 5px } .padding10 { padding: 10px } .padding15 { padding: 15px } .padding20 { padding: 20px } .padding25 { padding: 25px } .padding50 { padding: 50px } .padding75 { padding: 75px } .padding100 { padding: 100px } .sidePadding5 { padding-left: 5px; padding-right: 5px } .sidePadding10 { padding-left: 10px; padding-right: 10px } .sidePadding15 { padding-left: 15px; padding-right: 15px } .sidePadding25 { padding-left: 25px; padding-right: 25px } .sidePadding50 { padding-left: 50px; padding-right: 50px } .sidePadding75 { padding-left: 75px; padding-right: 75px } .sideBotPadding5 { padding-left: 5px; padding-right: 5px; padding-bottom: 5px } .sideBotPadding10 { padding-left: 10px; padding-right: 10px; padding-bottom: 10px } .sideBotPadding15 { padding-left: 15px; padding-right: 15px; padding-bottom: 15px } .sideBotPadding25 { padding-left: 25px; padding-right: 25px; padding-bottom: 25px } .sideBotPadding50 { padding-left: 50px; padding-right: 50px; padding-bottom: 50px } .sideBotPadding75 { padding-left: 75px; padding-right: 75px; padding-bottom: 75px } .sideTopPadding5 { padding-left: 5px; padding-right: 5px; padding-top: 5px } .sideTopPadding10 { padding-left: 10px; padding-right: 10px; padding-top: 10px } .sideTopPadding15 { padding-left: 15px; padding-right: 15px; padding-top: 15px } .sideTopPadding25 { padding-left: 25px; padding-right: 25px; padding-top: 25px } .sideTopPadding50 { padding-left: 50px; padding-right: 50px; padding-top: 50px } .sideTopPadding75 { padding-left: 75px; padding-right: 75px; padding-top: 75px } .halfWidthPadding10 { width: calc(var(--halfWidth) - 20px); float: left; padding: 10px } .halfWidthPadding15 { width: calc(var(--halfWidth) - 30px); float: left; padding: 15px } .halfWidthPadding25 { width: calc(var(--halfWidth) - 50px); float: left; padding: 25px } .thirdWidth { width: var(--thirdWidth); float: left } .thirdWidthPadding10 { width: var(--thirdWidth); float: left; padding: 10px } .thirdWidthPadding15 { width: var(--thirdWidth); float: left; padding: 15px } .thirdWidthPadding25 { width: var(--thirdWidth); float: left; padding: 25px } .w450Padding10 { width: calc(var(--w450) - 20px); float: left; padding: 10px } .w450Padding15 { width: calc(var(--w450) - 30px); float: left; padding: 15px } .w450Padding25 { width: calc(var(--w450) - 50px); float: left; padding: 25px } .w400Padding50 { width: calc(var(--w400) - 50px); float: left; padding: 50px; padding-right: 0px } .w300Padding50 { width: calc(var(--w300) - 50px); float: left; padding: 50px; padding-right: 0px } .w250Padding50 { width: calc(var(--w250) - 50px); float: left; padding: 50px; padding-right: 0px } .w225Padding50 { width: calc(var(--w225) - 50px); float: left; padding: 50px; padding-right: 0px } .mt0 {margin-top:0 !important} .mr0 {margin-right:0 !important} .mb0 {margin-bottom:0 !important} .ml0 {margin-left:0 !important} .mv0 {margin-bottom: 0 !important;margin-top:0 !important} .mh0 {margin:0 !important} .pa0 {padding:0 !important} .pt0 {padding-top:0 !important} .pr0 {padding-right:0 !important} .pb0 {padding-bottom:0 !important} .pl0 {padding-left:0 !important} .pv0 {padding-bottom: 0 !important;padding-top:0 !important} .ph0 {padding-left: 0 !important;padding-right:0 !important} .mt3 {margin-top:3px !important} .mr3 {margin-right:3px !important} .mb3 {margin-bottom:3px !important} .ml3 {margin-left:3px !important} .mv3 {margin-bottom: 3px !important;margin-top:3px !important} .mh3 {margin:3px 0 !important} .pa3 {padding:3px !important} .pt3 {padding-top:3px !important} .pr3 {padding-right:3px !important} .pb3 {padding-bottom:3px !important} .pl3 {padding-left:3px !important} .pv3 {padding-bottom: 3px !important;padding-top:3px !important} .ph3 {padding-left: 3px !important;padding-right:3px !important} .mt5 {margin-top:5px !important} .mr5 {margin-right:5px !important} .mb5 {margin-bottom:5px !important} .ml5 {margin-left:5px !important} .mv5 {margin-bottom: 5px !important;margin-top:5px !important} .mh5 {margin:5px 0 !important} .pa5 {padding:5px !important} .pt5 {padding-top:5px !important} .pr5 {padding-right:5px !important} .pb5 {padding-bottom:5px !important} .pl5 {padding-left:5px !important} .pv5 {padding-bottom: 5px !important;padding-top:5px !important} .ph5 {padding-left: 5px !important;padding-right:5px !important} .mt8 {margin-top:8px !important} .mr8 {margin-right:8px !important} .mb8 {margin-bottom:8px !important} .ml8 {margin-left:8px !important} .mv8 {margin-bottom: 8px !important;margin-top:8px !important} .mh8 {margin:8px 0 !important} .pa8 {padding:8px !important} .pt8 {padding-top:8px !important} .pr8 {padding-right:8px !important} .pb8 {padding-bottom:8px !important} .pl8 {padding-left:8px !important} .pv8 {padding-bottom: 8px !important;padding-top:8px !important} .ph8 {padding-left: 8px !important;padding-right:8px !important} .mt10 {margin-top:10px !important} .mr10 {margin-right:10px !important} .mb10 {margin-bottom:10px !important} .ml10 {margin-left:10px !important} .mv10 {margin-bottom: 10px !important;margin-top:10px !important} .mh10 {margin:10px 0 !important} .pa10 {padding:10px !important} .pt10 {padding-top:10px !important} .pr10 {padding-right:10px !important} .pb10 {padding-bottom:10px !important} .pl10 {padding-left:10px !important} .pv10 {padding-bottom: 10px !important;padding-top:10px !important} .ph10 {padding-left: 10px !important;padding-right:10px !important} .mt15 {margin-top:15px !important} .mr15 {margin-right:15px !important} .mb15 {margin-bottom:15px !important} .ml15 {margin-left:15px !important} .mv15 {margin-bottom: 15px !important;margin-top:15px !important} .mh15 {margin:15px 0 !important} .pa15 {padding:15px !important} .pt15 {padding-top:15px !important} .pr15 {padding-right:15px !important} .pb15 {padding-bottom:15px !important} .pl15 {padding-left:15px !important} .pv15 {padding-bottom: 15px !important;padding-top:15px !important} .ph15 {padding-left: 15px !important;padding-right:15px !important} .mt20 {margin-top:20px !important} .mr20 {margin-right:20px !important} .mb20 {margin-bottom:20px !important} .ml20 {margin-left:20px !important} .mv20 {margin-bottom: 20px !important;margin-top:20px !important} .mh20 {margin:20px 0 !important} .pa20 {padding:20px !important} .pt20 {padding-top:20px !important} .pr20 {padding-right:20px !important} .pb20 {padding-bottom:20px !important} .pl20 {padding-left:20px !important} .pv20 {padding-bottom: 20px !important;padding-top:20px !important} .ph20 {padding-left: 20px !important;padding-right:20px !important} .mt25 {margin-top:25px !important} .mr25 {margin-right:25px !important} .mb25 {margin-bottom:25px !important} .ml25 {margin-left:25px !important} .mv25 {margin-bottom: 25px !important;margin-top:25px !important} .mh25 {margin:25px 0 !important} .pa25 {padding:25px !important} .pt25 {padding-top:25px !important} .pr25 {padding-right:25px !important} .pb25 {padding-bottom:25px !important} .pl25 {padding-left:25px !important} .pv25 {padding-bottom: 25px !important;padding-top:25px !important} .ph25 {padding-left: 25px !important;padding-right:25px !important} .mt30 {margin-top:30px !important} .mr30 {margin-right:30px !important} .mb30 {margin-bottom:30px !important} .ml30 {margin-left:30px !important} .mv30 {margin-bottom: 30px !important;margin-top:30px !important} .mh30 {margin:30px 0 !important} .pa30 {padding:30px !important} .pt30 {padding-top:30px !important} .pr30 {padding-right:30px !important} .pb30 {padding-bottom:30px !important} .pl30 {padding-left:30px !important} .pv30 {padding-bottom: 30px !important;padding-top:30px !important} .ph30 {padding-left: 30px !important;padding-right:30px !important} .mt35 {margin-top:35px !important} .mr35 {margin-right:35px !important} .mb35 {margin-bottom:35px !important} .ml35 {margin-left:35px !important} .mv35 {margin-bottom: 35px !important;margin-top:35px !important} .mh35 {margin:35px 0 !important} .pa35 {padding:35px !important} .pt35 {padding-top:35px !important} .pr35 {padding-right:35px !important} .pb35 {padding-bottom:35px !important} .pl35 {padding-left:35px !important} .pv35 {padding-bottom: 35px !important;padding-top:35px !important} .ph35 {padding-left: 35px !important;padding-right:35px !important} .mt40 {margin-top:40px !important} .mr40 {margin-right:40px !important} .mb40 {margin-bottom:40px !important} .ml40 {margin-left:40px !important} .mv40 {margin-bottom: 40px !important;margin-top:40px !important} .mh40 {margin:40px 0 !important} .pa40 {padding:40px !important} .pt40 {padding-top:40px !important} .pr40 {padding-right:40px !important} .pb40 {padding-bottom:40px !important} .pl40 {padding-left:40px !important} .pv40 {padding-bottom: 40px !important;padding-top:40px !important} .ph40 {padding-left: 40px !important;padding-right:40px !important} .mt45 {margin-top:45px !important} .mr45 {margin-right:45px !important} .mb45 {margin-bottom:45px !important} .ml45 {margin-left:45px !important} .mv45 {margin-bottom: 45px !important;margin-top:45px !important} .mh45 {margin:45px 0 !important} .pa45 {padding:45px !important} .pt45 {padding-top:45px !important} .pr45 {padding-right:45px !important} .pb45 {padding-bottom:45px !important} .pl45 {padding-left:45px !important} .pv45 {padding-bottom: 45px !important;padding-top:45px !important} .ph45 {padding-left: 45px !important;padding-right:45px !important} .mt50 {margin-top:50px !important} .mr50 {margin-right:50px !important} .mb50 {margin-bottom:50px !important} .ml50 {margin-left:50px !important} .mv50 {margin-bottom: 50px !important;margin-top:50px !important} .mh50 {margin:50px 0 !important} .pa50 {padding:50px !important} .pt50 {padding-top:50px !important} .pr50 {padding-right:50px !important} .pb50 {padding-bottom:50px !important} .pl50 {padding-left:50px !important} .pv50 {padding-bottom: 50px !important;padding-top:50px !important} .ph50 {padding-left: 50px !important;padding-right:50px !important} .ph75 {padding-left: 75px !important;padding-right:75px !important} .mt60 {margin-top:60px !important} .mr60 {margin-right:60px !important} .mb60 {margin-bottom:60px !important} .ml60 {margin-left:60px !important} .mv60 {margin-bottom: 60px !important;margin-top:60px !important} .mh60 {margin:60px 0 !important} .pa60 {padding:60px !important} .pt60 {padding-top:60px !important} .pr60 {padding-right:60px !important} .pb60 {padding-bottom:60px !important} .pl60 {padding-left:60px !important} .pv60 {padding-bottom: 60px !important;padding-top:60px !important} .ph60 {padding-left: 60px !important;padding-right:60px !important} .mt70 {margin-top:70px !important} .mr70 {margin-right:70px !important} .mb70 {margin-bottom:70px !important} .ml70 {margin-left:70px !important} .mv70 {margin-bottom: 70px !important;margin-top:70px !important} .mh70 {margin:70px 0 !important} .pa70 {padding:70px !important} .pt70 {padding-top:70px !important} .pr70 {padding-right:70px !important} .pb70 {padding-bottom:70px !important} .pl70 {padding-left:70px !important} .pv70 {padding-bottom: 70px !important;padding-top:70px !important} .ph70 {padding-left: 70px !important;padding-right:70px !important} .mt80 {margin-top:80px !important} .mr80 {margin-right:80px !important} .mb80 {margin-bottom:80px !important} .ml80 {margin-left:80px !important} .mv80 {margin-bottom: 80px !important;margin-top:80px !important} .mh80 {margin:80px 0 !important} .pa80 {padding:80px !important} .pt80 {padding-top:80px !important} .pr80 {padding-right:80px !important} .pb80 {padding-bottom:80px !important} .pl80 {padding-left:80px !important} .pv80 {padding-bottom: 80px !important;padding-top:80px !important} .ph80 {padding-left: 80px !important;padding-right:80px !important} .mt100 {margin-top:100px !important} .mr100 {margin-right:100px !important} .mb100 {margin-bottom:100px !important} .ml100 {margin-left:100px !important} .mv100 {margin-bottom: 100px !important;margin-top:100px !important} .mh100 {margin:100px 0 !important} .pa100 {padding:100px !important} .pt100 {padding-top:100px !important} .pr100 {padding-right:100px !important} .pb100 {padding-bottom:100px !important} .pl100 {padding-left:100px !important} .pv100 {padding-bottom: 100px !important;padding-top:100px !important} .ph100 {padding-left: 100px !important;padding-right:100px !important} .mt200 {margin-top:200px !important} .mr200 {margin-right:200px !important} .mb200 {margin-bottom:200px !important} .ml200 {margin-left:200px !important} .mv200 {margin-bottom: 200px !important;margin-top:200px !important} .mh200 {margin:200px 0 !important} .pa200 {padding:200px !important} .pt200 {padding-top:200px !important} .pr200 {padding-right:200px !important} .pb200 {padding-bottom:200px !important} .pl200 {padding-left:200px !important} .pv200 {padding-bottom: 200px !important;padding-top:200px !important} .ph200 {padding-left: 200px !important;padding-right:200px !important} .mb0-last > :last-child {margin-bottom:0 !important} .t42-72 {font-size: 2.625rem;line-height:1}@media (min-width: 550px) {.t42-72 {font-size:3.125rem}}@media (min-width: 650px) {.t42-72 {font-size:3.4375rem}}@media (min-width: 850px) {.t42-72 {font-size:3.75rem}}@media (min-width: 1024px) {.t42-72 {font-size:4.0625rem}}@media (min-width: 1280px) {.t42-72 {font-size:4.5rem}} .t30-60 {font-size: 1.875rem;line-height:1}@media (min-width: 550px) {.t30-60 {font-size:2.25rem}}@media (min-width: 650px) {.t30-60 {font-size:2.5rem}}@media (min-width: 850px) {.t30-60 {font-size:3rem}}@media (min-width: 1280px) {.t30-60 {font-size:3.375rem}}@media (min-width: 1400px) {.t30-60 {font-size:3.75rem}} .t30-48 {font-size: 1.875rem;line-height:1}@media (min-width: 550px) {.t30-48 {font-size:2.25rem}}@media (min-width: 650px) {.t30-48 {font-size:2.5rem}}@media (min-width: 850px) {.t30-48 {font-size:3rem}} .t30-36 {font-size: 1.875rem;line-height:1}@media (min-width: 550px) {.t30-36 {font-size:2rem}}@media (min-width: 650px) {.t30-36 {font-size:2.125rem}}@media (min-width: 750px) {.t30-36 {font-size:2.25rem}} .t28-48 {font-size: 1.5rem;line-height:1.1}@media (min-width: 650px) {.t28-48 {font-size:1.75rem}}@media (min-width: 750px) {.t28-48 {font-size:2rem}}@media (min-width: 850px) {.t28-48 {font-size:2.25rem}}@media (min-width: 1024px) {.t28-48 {font-size:2.625rem}}@media (min-width: 1280px) {.t28-48 {font-size:3rem}} .t24-42 {font-size: 1.5rem;line-height:1.1}@media (min-width: 650px) {.t24-42 {font-size:1.625rem}}@media (min-width: 750px) {.t24-42 {font-size:1.75rem}}@media (min-width: 850px) {.t24-42 {font-size:2rem}}@media (min-width: 1024px) {.t24-42 {font-size:2.25rem}}@media (min-width: 1280px) {.t24-42 {font-size:2.625rem}} .t24-36 {font-size: 1.5rem;line-height:1.1}@media (min-width: 650px) {.t24-36 {font-size:1.625rem}}@media (min-width: 750px) {.t24-36 {font-size:1.75rem}}@media (min-width: 850px) {.t24-36 {font-size:2rem}}@media (min-width: 1024px) {.t24-36 {font-size:2.25rem}} .t24-30 {font-size:1.5rem}@media (min-width: 650px) {.t24-30 {font-size:1.625rem}}@media (min-width: 750px) {.t24-30 {font-size:1.75rem}}@media (min-width: 850px) {.t24-30 {font-size:1.875rem}} .t20-22 {font-size: 1.25rem;line-height:1.2}@media (min-width: 750px) {.t20-22 {font-size:1.375rem}} .t18-24 {font-size: 1.125rem;line-height:1.2}@media (min-width: 650px) {.t18-24 {font-size:1.25rem}}@media (min-width: 750px) {.t18-24 {font-size:1.375rem}}@media (min-width: 1024px) {.t18-24 {font-size:1.5rem}} .t18-22 {font-size: 1.125rem;line-height:1.15}@media (min-width: 1024px) {.t18-22 {font-size:1.25rem}}@media (min-width: 1280px) {.t18-22 {font-size:1.375rem}} .t18-20 {font-size: 1.125rem;line-height:1.25rem}@media (min-width: 750px) {.t18-20 {font-size:1.1875rem}}@media (min-width: 1024px) {.t18-20 {font-size:1.25rem}} .t16-30 {font-size: 1rem;line-height:1.2}@media (min-width: 550px) {.t16-30 {font-size:1.125rem}}@media (min-width: 650px) {.t16-30 {font-size:1.5rem}}@media (min-width: 750px) {.t16-30 {font-size:1.625rem}}@media (min-width: 1024px) {.t16-30 {font-size:1.875rem}} .t16-24 {font-size: 1rem;line-height:1.1}@media (min-width: 550px) {.t16-24 {font-size:1.125rem}}@media (min-width: 650px) {.t16-24 {font-size:1.25rem}}@media (min-width: 750px) {.t16-24 {font-size:1.375rem}}@media (min-width: 1024px) {.t16-24 {font-size:1.5rem}} .t16-22 {font-size:1rem}@media (min-width: 650px) {.t16-22 {font-size:1.125rem}}@media (min-width: 1024px) {.t16-22 {font-size: 1.25rem;font-size:1.375rem}} .t16-20 {font-size: 1rem;line-height:1.4}@media (min-width: 650px) {.t16-20 {font-size:1.125rem}}@media (min-width: 1024px) {.t16-20 {font-size:1.25rem}} .t16-18 {font-size: 1rem;line-height:1.4}@media (min-width: 750px) {.t16-18 {font-size:1.125rem}} .t16 {font-size:1rem} .t16, .t16-i {line-height:1.4} .t16-i {font-size:1rem !important} .t15 {font-size: .9375rem;line-height:1.4}@media (min-width: 750px) {.t15 {line-height:1.5}} .t14-16 {font-size: .875rem !important;line-height:1.2}@media (min-width: 650px) {.t14-16 {font-size:1rem !important}} .t13-18 {font-size: .8125rem;line-height:1.2}@media (min-width: 650px) {.t13-18 {font-size:.9375rem}}@media (min-width: 750px) {.t13-18 {font-size:1.125rem}} .t13-15 {font-size: .8125rem;line-height:1.2}@media (min-width: 750px) {.t13-15 {font-size:.9375rem}} .t13 {font-size: .8125rem;line-height:1.2}p {font-size: 1rem;line-height:1.33}@media (min-width: 750px) {p {font-size:1.125rem}}@media (min-width: 1280px) {p {line-height:1.5}}p a {color:inherit} .lh1 {line-height:1 !important} .lh1_1 {line-height:1.1 !important} .lh1_2 {line-height:1.2 !important} .lh1_4 {line-height:1.4 !important} .lh1_5 {line-height:1.5 !important} .lh24 {line-height:24px} .br {display:block} .ls-10 {letter-spacing:10px} .ls-1 {letter-spacing:1px} .ls-2 {letter-spacing:2px} .ls-3 {letter-spacing:3px} .ls-5 {letter-spacing:5px} .btn {border: 0;border-radius: 5px;cursor: pointer;display: inline-block;font: inherit;font-family: 'Raleway', sans-serif;font-size: 1rem;font-style: normal;font-weight: 700;line-height: 3rem;margin: 0;min-height: 3.125rem;padding: 0 1.25rem;text-align: center;vertical-align:middle} .btn:active, .btn:focus, .btn:hover {text-decoration:none} .btn::-moz-focus-inner {border: 0;padding:0} .btn__icon, .btn__text {position: relative;z-index:1} .btn__icon {display: inline-block;margin-bottom: .1875rem;margin-right: .5rem;vertical-align:middle} .btn__icon.icon-play-w-bd {margin-right:.3125rem} .btn__badge {background: rgba(0, 0, 0, .3);border-radius: 10px;color: #fff;display: inline-block;font-size: .8125rem;font-weight: 700;height: 1.25rem;line-height: 1.25rem;margin-left: .5rem;vertical-align: middle;width:1.875rem} .desktop .btn--pri:focus .btn__badge, .desktop .btn--pri:hover .btn__badge, .desktop .btn--sec:focus .btn__badge, .desktop .btn--sec:hover .btn__badge, .desktop .btn--tert:focus .btn__badge, .desktop .btn--tert:hover .btn__badge {background: var(--accent);color:#fff} .btn--inv .btn__badge {background: hsla(0, 0%, 100%, .7);color: var(--dark)} .btn.is-disabled {background: #d8dadb;border-color: #d8dadb;color:#fff} .btn.is-disabled:before {display:none !important} .btn.is-disabled:hover {background: #d8dadb;color: #fff;cursor:default} .btn.event-applied {background:#3eac7f} .btn--form, .btn--pri {background: var(--yellow);color: #fff;overflow: hidden;position:relative} .btn--form:before, .btn--pri:before {background: var(--accent);content: "";height: 500%;left: 100%;position: absolute;top: -50%;-webkit-transform: rotate(20deg);transform: rotate(20deg);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition: -webkit-transform .6s;transition: -webkit-transform .6s;transition: transform .6s;transition: transform .6s, -webkit-transform .6s;width:150%} .btn--form:hover, .btn--pri:hover, .desktop .btn--form:focus, .desktop .btn--form:hover, .desktop .btn--pri:focus, .desktop .btn--pri:hover, .desktop .clickarea:hover .btn--form, .desktop .clickarea:hover .btn--pri {color:#fff} .desktop .btn--form:focus:before, .desktop .btn--form:hover:before, .desktop .btn--pri:focus:before, .desktop .btn--pri:hover:before, .desktop .clickarea:hover .btn--form:before, .desktop .clickarea:hover .btn--pri:before {-webkit-transform: rotate(20deg) translateX(-100%);transform:rotate(20deg) translateX(-100%)} .btn--form {z-index:1} .btn--form:before {z-index:-1} .btn--sec {background: var(--accent);color: var(--white);overflow: hidden;position:relative} .btn--sec:before {background: var(--yellow);content: "";height: 500%;left: 100%;position: absolute;top: -50%;-webkit-transform: rotate(20deg);transform: rotate(20deg);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition: -webkit-transform .6s;transition: -webkit-transform .6s;transition: transform .6s;transition: transform .6s, -webkit-transform .6s;width:150%} .btn--sec:hover, .desktop .btn--sec:focus, .desktop .btn--sec:hover, .desktop .clickarea:hover .btn--sec {color: var(--yellow)} .desktop .btn--sec:focus:before, .desktop .btn--sec:hover:before, .desktop .clickarea:hover .btn--sec:before {-webkit-transform: rotate(20deg) translateX(-100%);transform:rotate(20deg) translateX(-100%)} .btn--round {border-radius: 25px;padding:0 1.5625rem} .btn--toggle {padding: 0 48px 0 40px;position:relative} .btn--toggle:before {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2391c63f" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><path d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path></svg>');content: "";height: 7px;position: absolute;right: 20px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: -webkit-transform .2s;transition: -webkit-transform .2s;transition: transform .2s;transition: transform .2s, -webkit-transform .2s;width:12px} .is-expanded .btn--toggle:before {-webkit-transform: translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)} .btn--training {background-color: #00b67c;color: #fff;-webkit-transition: background-color .2s;transition:background-color .2s} .btn--training:hover {background-color: #77d3b6;color:#fff} .btn--qua {background-color: transparent;border: 2px solid #d8dadb;color: #fe6600;-webkit-transition: border-color .2s;transition:border-color .2s} .btn--qua:hover {border-color:#fe6600} .btn--sec-round {border: 2px solid #d8dadb;border-radius: 25px;color: #122329;padding: 0 1.5625rem;-webkit-transition: border-color .2s;transition:border-color .2s} .btn--sec-round:hover {color:#122329} .desktop .btn--sec-round:focus, .desktop .btn--sec-round:hover {border-color: #3e97a9;color:#122329} .btn--sec-round-inv {border: 2px solid #fff;border-radius: 5px;color: #fff;-webkit-transition: all .15s;transition:all .15s} .btn--sec-round-inv:hover {color:#fff} .desktop .btn--sec-round-inv:focus, .desktop .btn--sec-round-inv:hover {background: #fff;border-color: #fff;color:#122329} .btn--sec-round-inv.btn--lrg {border-radius:30px} .btn--sec-round-dark {border: 2px solid rgba(62, 151, 169, .5);border-radius: 25px;color: #fff;padding: 0 1.5625rem;-webkit-transition: all .15s;transition:all .15s} .btn--sec-round-dark:hover {color:#fff} .desktop .btn--sec-round-dark:focus, .desktop .btn--sec-round-dark:hover {border-color:#fff} .btn--sec-round-dark.btn--lrg {border-radius:30px} .btn--tert {border: 2px solid rgba(62, 151, 169, .5);-webkit-transition: all .15s;transition:all .15s} .btn--tert, .btn--tert:hover {color:#122329} .desktop .btn--tert:focus, .desktop .btn--tert:hover {background: #3e97a9;color:#fff} .btn--sml {font-size: .875rem;line-height: 2.5rem;min-height: 2.5rem;min-width:10rem} .btn--lrg {line-height: 3.4375rem;min-height:3.4375rem} .btn-icon--sml {height: 2.1875rem;line-height: 2.1875rem;width:2.1875rem} .btn--150 {min-width:9.375rem} .btn--220 {min-width:13.75rem} .btn--240 {min-width:15rem} .btn--250 {min-width:15.625rem} .btn--260 {min-width:16.25rem} .btn--280 {min-width:15rem} .btn--300 {min-width:17rem}@media (min-width: 650px) {.btn--300-ts {min-width:18.75rem} .btn--lrg {line-height: 3.4375rem;min-height:3.4375rem}} .btn--fixed {bottom: 0;position: fixed;right: 0;width:100%} .btn--cta {-webkit-box-orient: horizontal;-webkit-box-direction: normal;border-bottom: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: row;flex-direction: row;line-height: 1.1;padding-right: 2.5rem;z-index:3} .btn--cta:after {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2391c63f" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_right</title><path d="M8.578 16.594l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></svg>');bottom: 0;content: "";height: 12px;margin: auto auto auto .5625rem;position: absolute;right: 1.25rem;text-align: center;top: 0;width:7px} .btn--cta .btn__text {-ms-flex-item-align: center;align-self:center} .btn-play {border: 3px solid #fff;border-radius: 50%;display: block;height: 3.125rem;width:3.125rem} .btn-play, .btn-play:after {left: 50%;position: absolute;top: 50%;-webkit-transform: translate(-50%, -50%);transform:translate(-50%, -50%)} .btn-play:after {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2391c63f" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>play_circle_outline</title><path d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM9.984 16.5v-9l6 4.5z"></path></svg>');content: "";height: 18px;margin-left: 2px;width:18px} .container-btn--cta {opacity: 0;-webkit-transition: opacity .25s;transition:opacity .25s} .container-btn--cta.is-active {opacity:1}@media (min-width: 350px) {.btn-play {height: 3.75rem;width:3.75rem}}@media (min-width: 550px) {.btn {font-size:1.125rem} .btn--fixed {bottom: 1.25rem;right:1.25rem} .btn--cta {width:24.375rem}}@media (min-width: 750px) {.btn--250 {min-width:20rem} .btn--280 {min-width:17.5rem} .btn-play {height: 4.375rem;width:4.375rem}}@media (min-width: 850px) {.btn-play {height: 5rem;width:5rem}}@media (min-width: 1024px) {.btn--round {border-radius:30px} .btn--qua {border-width: 3px;padding-bottom: 2px;padding-top:2px} .btn__text {font-size:1.25rem} .btn--toggle {padding:0 48px 0 40px}}input.form-control { padding: 10px; font-size: 15pt; font-family: 'Raleway'; border: 2px solid var(--dark); }@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 {--yellow: #fcb416;--accent: #91c63f;--dark: #24381a;--shade: #8aa05a;--shadeSec: #5f7240;--alt: #788b4f;--mid: #67833d;--back: #6d8146;--backSec: #84a24f;--lightGreen: #acd143;--white: #fff;--black: #000;--purple: #562696;--red: #ff0000;--fitContentWidth: "width: -webkit-fit-content; width: -moz-fit-content; width: fit-content";--fitContentHeight: "height: -webkit-fit-content; height: -moz-fit-content; height: fit-content";} .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); } .yellow { color: var(--yellow); } .bg--yellow {background-color: var(--yellow); } .colorMid { color: var(--mid); } .bg--mid { background-color: var(--mid); } .gdg { font-family: 'GdG'; } .gdg15 { font-family: 'GdG'; font-size: 15pt; } .gdg20 { font-family: 'GdG'; font-size: 19pt; } .devBorder { border: 1px solid red; } .hand { cursor: pointer; cursor: hand } .desktop .gdg25 { font-family: 'GdG'; font-size: 25pt; font-weight: normal;} .mobile .gdg25 {font-family: 'GdG'; font-size: 17pt; font-weight: normal; letter-spacing: -1px; } .desktop .gdg20 { font-family: 'GdG'; font-size: 19pt; font-weight: normal;} .mobile .gdg20 {font-family: 'GdG'; font-size: 17pt; font-weight: normal; letter-spacing: -1px; } .raleway { font-family: 'Raleway'; } .ralewayBold { font-family: 'Raleway'; font-weight: bold; } .t-pri-m { font-family: 'Raleway', Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 400; text-transform:uppercase } .t-sec-r { font-weight:400 } .t-sec-b, .t-sec-r, .t-sec-c { font-family: 'Raleway'; font-style: normal } .t-sec-b { font-weight:700 } .t-sec-c { font-weight:700; font-size: 1em } .wrapper { height: auto !important; } .fitContent { width: var(--fitContentWidth); height: auto !important; } .fitContentW { width: var(--fitContentWidth) } .fitContentH { height: auto !important; } .nodisplay, .ndsp { display: none } .upper, .caps { text-transform: uppercase } .clearfix { float: none; clear: both } .float { left: left } .alignCenter { margin-left: auto; margin-right: auto; position: relative } .textCenter { text-align: center } .textLeft { text-align: left } .textRight { text-align: right } .flon, .flono { overflow: hidden; } .flos { overflow: scroll; } .floa { overflow: auto; } .bold { font-weight: bold } .normal { font-style: normal } .italic { font-style: italic }html,body {margin: 0;padding: 0}body {font-family: "Raleway", sans-serif;color: var(--darkgreen);background-color: var(--back);text-align: left;overflow-x: hidden;}a,a:link,a:active,a:visited {outline: none;border: 0;text-decoration: none;color: var(--accent)}a:hover { color: var(--yellow) }h1 {font-family: "GdG", "Raleway", sans-serif;color: var(--dark);font-weight: normal;margin: 0;padding: 0}p {font-family: "Raleway", sans-serif;color: var(--dark);font-weight: normal;margin: 0;padding: 0} .pace {-webkit-pointer-events: none;pointer-events: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;position: fixed;margin: auto;top: 0;left: 0;right: 0;height: 4px;width: 100%;background: var(--back);overflow: hidden;z-index: 99993} .pace .pace-progress {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);position: fixed;display: block;position: absolute;top: 0;right: 100%;height: 100%;width: 100%;background: var(--yellow);z-index: 99992} .pace.pace-inactive {display: none} .frame-top {position: fixed;top: 0;left: calc(50% - 120px);width: 125px;height: 106px;margin: 50px;z-index: 9997;opacity: 0;-webkit-transform: translate3d(-100px, -100px, 0);-moz-transform: translate3d(-100px, -100px, 0);-ms-transform: translate3d(-100px, -100px, 0);-o-transform: translate3d(-100px, -100px, 0);transform: translate3d(-100px, -100px, 0)}@media only screen and (min-width: 768px) and (max-width: 1023px) {.frame-top { margin: 30px }}@media only screen and (max-width: 767px) {.frame-top { margin: 15px; width: 95px; height: 80px; left: calc(50% - 75px); }}@media only screen and (max-width: 390px) and (orientation: portrait) {.frame-top { width: 95px; height: 80px; left: calc(50% - 62px); }} .frame-left {position: fixed;top: 70px;left: 50px;width: 20px;height: calc(100% - 140px);color: var(--dark);font-size: "Raleway", sans-serif;font-size: 14px;z-index: 9997;opacity: 0;-webkit-transform: translate3d(-100px, 0, 0);-moz-transform: translate3d(-100px, 0, 0);-ms-transform: translate3d(-100px, 0, 0);-o-transform: translate3d(-100px, 0, 0);transform: translate3d(-100px, 0, 0)}@media only screen and (min-width: 768px) and (max-width: 1023px) {.frame-left {left: 30px}}@media only screen and (max-width: 767px) {.frame-left {left: 15px}} .frame-right {position: fixed;top: 70px;right: 50px;width: 20px;height: calc(100% - 140px);color: var(--dark);font-size: "Raleway", sans-serif;font-size: 14px;z-index: 9997;opacity: 0;-webkit-transform: translate3d(100px, 0, 0);-moz-transform: translate3d(100px, 0, 0);-ms-transform: translate3d(100px, 0, 0);-o-transform: translate3d(100px, 0, 0);transform: translate3d(100px, 0, 0)}@media only screen and (min-width: 768px) and (max-width: 1023px) {.frame-right {right: 30px}}@media only screen and (max-width: 767px) {.frame-right {right: 15px}} .frame-left-vertical {position: absolute;top: 50%;left: 50%;width: auto;height: 29px;text-align: center;-webkit-transform: translate3d(-50%, -50%, 0) rotate(-90deg);-moz-transform: translate3d(-50%, -50%, 0) rotate(-90deg);-ms-transform: translate3d(-50%, -50%, 0) rotate(-90deg);-o-transform: translate3d(-50%, -50%, 0) rotate(-90deg);transform: translate3d(-50%, -50%, 0) rotate(-90deg)} .frame-right-vertical {position: absolute;top: 50%;left: 50%;height: 23px;text-align: center;-webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);-moz-transform: translate3d(-50%, -50%, 0) rotate(90deg);-ms-transform: translate3d(-50%, -50%, 0) rotate(90deg);-o-transform: translate3d(-50%, -50%, 0) rotate(90deg);transform: translate3d(-50%, -50%, 0) rotate(90deg)} .hamburger-container {position: fixed;top: 25px;right: 50px;width: 30px;height: 40px;margin-top: -8px;cursor: pointer;z-index: 99999991;opacity: 0;-webkit-transform: translate3d(100px, -100px, 0);-moz-transform: translate3d(100px, -100px, 0);-ms-transform: translate3d(100px, -100px, 0);-o-transform: translate3d(100px, -100px, 0);transform: translate3d(100px, -100px, 0)} .popup-hamburger-container, .share-hamburger-container {position: fixed;top: 50px;left: calc(50% - 15px);width: 30px;height: 40px;margin-top: -8px;cursor: pointer;z-index: 99999991;opacity: 0;-webkit-transform: translate3d(100px, -100px, 0);-moz-transform: translate3d(100px, -100px, 0);-ms-transform: translate3d(100px, -100px, 0);-o-transform: translate3d(100px, -100px, 0);transform: translate3d(100px, -100px, 0)} .download-hamburger-container {position: fixed;top: 50px;left: 50px;width: 30px;height: 40px;margin-top: -8px;cursor: pointer;z-index: 99999991;opacity: 0;-webkit-transform: translate3d(100px, -100px, 0);-moz-transform: translate3d(100px, -100px, 0);-ms-transform: translate3d(100px, -100px, 0);-o-transform: translate3d(100px, -100px, 0);transform: translate3d(100px, -100px, 0)}@media only screen and (min-width: 768px) and (max-width: 1023px) {.hamburger-container { top: 30px; right: 30px } .popup-hamburger-container, .share-hamburger-container { top: 30px; left: 30px } .download-hamburger-container{ top: 30px; left: 30px }}@media only screen and (max-width: 767px) {.hamburger-container { top: 25px; right: 25px } .popup-hamburger-container, .share-hamburger-container { top: 15px; left: 15px } .download-hamburger-container { top: 15px; left: 15px }} .lineTop, .lineBottom,.plineTop, .plineBottom,.slineTop, .slineBottom,.dlineTop, .dlineBottom {position: absolute;height: 2px;width: 20px;background: var(--dark);right: 0;-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: all .2s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-moz-transition: all .2s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-ms-transition: all .2s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-o-transition: all .2s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;transition: all .2s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s} .lineTop, .plineTop, .slineTop, .dlineTop{ top: 14px } .lineBottom, .plineBottom, .slineBottom, .dlineBottom { bottom: 16px } .lineTop:before, .plineTop:before, .slineTop:before, .dlineTop:before {content: '';position: absolute;top: 0;left: 0;width: 0%;height: 100%;-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;background: var(--white);z-index: 1;-webkit-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-moz-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-ms-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-o-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s} .lineBottom:before, .plineBottom:before, .slineBottom:before, .dlineBottom:before {content: '';position: absolute;top: 0;left: 0;width: 0%;height: 100%;-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;background: var(--white);z-index: 1;-webkit-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) .085s;-moz-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) .085s;-ms-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) .085s;-o-transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) .085s;transition: all .12s cubic-bezier(0.615, 0.19, 0.305, 0.91) .085s} .hamburger-container:hover .lineTop:before { width: 100% } .hamburger-container:hover .lineBottom:before { width: 100% } .popup-hamburger-container:hover .plineTop:before { width: 100% } .popup-hamburger-container:hover .plineBottom:before { width: 100% } .share-hamburger-container:hover .slineTop:before { width: 100% } .share-hamburger-container:hover .slineBottom:before { width: 100% } .download-hamburger-container:hover .dlineTop:before { width: 100% } .download-hamburger-container:hover .dlineBottom:before { width: 100% } .lineTop.spin, .plineTop.spin, .slineTop.spin, .dlineTop.spin {top: 18px;background: var(--accent);-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg)} .lineTop.spin:before, .plineTop.spin:before, .slineTop.spin:before, .dlineTop.spin:before {content: '';position: absolute;top: 0;left: 0;width: 0%;height: 100%;-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;background: var(--yellow);z-index: 1} .lineBottom.spin, .plineBottom.spin, .slineBottom.spin, .dlineBottom.spin {bottom: 20px;background: var(--accent);-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-ms-transform: rotate(225deg);-o-transform: rotate(225deg);transform: rotate(225deg)} .lineBottom.spin:before, .plineBottom.spin:before, .slineBottom.spin:before, .dlineBottom.spin:before {content: '';position: absolute;top: 0;left: 0;width: 0%;height: 100%;-webkit-border-radius: 2px;border-radius: 2px;background-clip: padding-box;background: var(--yellow);z-index: 1} .gdg-container, .gdg-container img { cursor: pointer; width: 125px; height: 106px; overflow: hidden}@media only screen and (max-width: 390px) and (orientation: portrait) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 1112px) and (orientation: landscape) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 1080px) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 1024px) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} }@media only screen and (max-width: 834px) and (orientation: portrait) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 768px) and (orientation: portrait) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 736px) and (orientation: landscape) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} }@media only screen and (min-width: 320px) and (max-width: 414px) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-height: 560px) and (max-width: 360px) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (min-width: 414px) and (max-width: 414px) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 375px) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} } @media only screen and (max-width: 320px) { .gdg-container, .gdg-container img { width: 95px; height: 80px;} }@media only screen and (max-width: 667px) and (orientation: landscape) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} }@media only screen and (max-width: 568px) and (orientation: landscape) {.gdg-container, .gdg-container img { width: 95px; height: 80px;} } .shareAct-container {cursor: pointer;height: 20px;width: 200px;overflow: hidden} .shareAct-before {color: var(--yellow);position: relative;z-index: 3;height: 20px} .shareAct-after {position: relative;z-index: 1;height: 20px;color: var(--dark);margin-top: -20px;opacity: 0} .downloadAct-container {cursor: pointer;height: 20px;width: 200px;overflow: hidden} .downloadAct-before {color: var(--yellow);position: relative;z-index: 3;height: 20px} .downloadAct-after {position: relative;z-index: 1;height: 20px;color: var(--dark);margin-top: -20px;opacity: 0} .breadcrumbs { width: 380px } .bread-item {position: relative;display: inline-block;vertical-align: top;margin: 5px;cursor: pointer;overflow: hidden} .bread-arrow {position: relative;display: inline-block;margin: 5px;width: 20px;height: 20px;background: url("/assets/images/icons/arrow.svg") no-repeat center/contain} .bread-dash {position: relative;display: inline-block;margin: 5px;width: 20px;height: 20px;} .bread-before {color: var(--dark);position: relative;z-index: 3;height: 20px} .bread-after {position: relative;z-index: 1;height: 20px;color: var(--yellow);margin-top: -20px;opacity: 0} #navigation {position: fixed;right: 0;width: 50vw;height: 100%;background: var(--dark);z-index: 99999991;visibility: hidden;-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%);-o-transform: translateX(100%);transform: translateX(100%)} #popup {position: fixed;left: calc(50% - 12vw);top: calc(50% - 15vw);width: 25vw;height: 30vw;background: #fff;text-align: center;z-index: 99999991;visibility: hidden;border-radius:15px;box-shadow: var(--shadeSec) 0px 8px 24px;-webkit-transform: translateY(-200%);-moz-transform: translateY(-200%);-ms-transform: translateY(-200%);-o-transform: translateY(-200%);transform: translateY(-200%)}@media only screen and (min-height: 100px) and (max-width: 900px) {#popup { height: 50%; top: 25%; }} #share {position: fixed;left: calc(50% - 25vw);width: 50vw;height: 50%;background: #fff;text-align: center;z-index: 99999991;visibility: hidden;-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%);transform: translateY(-100%)} #download {position: fixed;left: 0;width: 50vw;height: 100%;background: #fff;text-align: center;z-index: 99999991;visibility: hidden;-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);-o-transform: translateX(-100%);transform: translateX(-100%)}@media only screen and (min-width: 768px) and (max-width: 1023px) {#navigation { width: 85vw } #download, #share { width: 100vw; left: 0 } #popup { width: 90vw; left: 5vw }}@media only screen and (max-width: 767px) {#navigation { width: 100vw } #download, #share { width: 100vw; left: 0 } #popup { width: 90vw; left: 5vw }} .nav-main, .popup-main, .share-main {position: relative;display: block;margin: 90px auto 0 auto;padding: 0 50px;text-align: right;font-family: "GdG", "Raleway", sans-serif;font-size: 50px;letter-spacing: 0px} .popup-main, .share-main {margin: 150px auto 0 auto;font-size: 32px;text-align: left;letter-spacing: 2px;}@media only screen and (min-width: 768px) and (max-width: 1023px) {.nav-main {margin: 125px auto 0 auto;font-size: 45px;letter-spacing: 1px;padding: 0 30px} .popup-main, .share-main {margin: 150px auto 0 auto;font-size: 45px;letter-spacing: 1px;padding: 0 30px}}@media only screen and (max-width: 767px) {.nav-main {margin: 100px auto 0 auto;font-size: 45px;letter-spacing: 0px;padding: 0 15px} .popup-main, .share-main {margin: 90px auto 0 auto;font-size: 45px;letter-spacing: 0px;padding: 0 15px}} .nav-main a { color: var(--white) } .popup-main a { color: var(--dark) } .share-main a { color: var(--dark) } .nav-item, .popup-item, .share-item {position: relative;display: block;margin: 0 auto;height: 90px;cursor: pointer;overflow: hidden}@media only screen and (min-width: 768px) and (max-width: 1023px) {.nav-item { height: 92px } .popup-item { height: 102px; padding-bottom: 92px } .share-item { height: 102px; padding-bottom: 92px }}@media only screen and (max-width: 767px) {.nav-item { height: 65px } .popup-item { height: 80px; padding-bottom: 70px } .share-item { height: 80px; padding-bottom: 70px }} .nav-item-wrapper, .popup-item-wrapper, .share-item-wrapper {position: relative;display: block;-webkit-transform: translateY(100%);-moz-transform: translateY(100%);-ms-transform: translateY(100%);-o-transform: translateY(100%);transform: translateY(100%)} .nav-item-link, .popup-item-link, .share-item-link {position: relative;display: inline;z-index: 3;height: 90px;padding: 0 8px 4px 4px;color: var(--white);-webkit-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-moz-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-ms-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-o-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s} .popup-item-link, .share-item-link { color: var(--dark); }@media only screen and (min-width: 768px) and (max-width: 1023px) {.nav-item-link, .popup-item-link, .share-item-link { height: 92px }}@media only screen and (max-width: 767px) {.nav-item-link, .popup-item-link, .share-item-link { height: 70px }} .nav-item-link:before, .popup-item-link:before, .share-item-link:before {content: '';position: absolute;top: 0px;left: auto;right: 0;bottom: 0;width: 0%;height: 100%;background: var(--yellow);-webkit-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-moz-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-ms-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-o-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;z-index: -1} .nav-item-link:hover { color: var(--dark) } .popup-item-link:hover { color: var(--yellow) } .share-item-link:hover { color: var(--yellow) } .nav-item-link:hover:before, .popup-item-link:hover:before, .share-item-link:hover:before { width: 100%; left: 0 } .popup-item-link:before { background: var(--dark)} .share-item-link:before { background: var(--dark)} .nav-sec, .popup-sec, .share-sec {position: relative;display: block;margin: 30px auto 0 auto;padding: 0 25px 40px;text-align: right;font-family: "GdG" ,"Raleway", sans-serif;color: var(--yellow);font-size: 40px;letter-spacing: 0px;padding-right: 50px;} .nav-sec a, .popup-sec a, .share-sec a { color: var(--accent) }@media only screen and (min-width: 768px) and (max-width: 1023px) {.nav-sec, .popup-sec, .share-sec { padding: 0 30px; font-size: 50px; letter-spacing: -3px }}@media only screen and (max-width: 767px) {.nav-sec, .popup-sec, .share-sec { padding: 0 15px; font-size: 35px; letter-spacing: -1px }} .nav-item-link-sec, .popup-item-link-sec, .share-item-link-sec {position: relative;display: inline;z-index: 3;height: 35px;padding: 0 8px 0 4px;color: var(--yellow);-webkit-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-moz-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-ms-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-o-transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;transition: all .55s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s} .nav-item-link-sec:before, .popup-item-link-sec:before, .share-item-link-sec:before {content: '';position: absolute;top: 0px;left: auto;right: 0;bottom: 0;width: 0%;height: 100%;background: var(--yellow);-webkit-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-moz-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-ms-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;-o-transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;transition: all .25s cubic-bezier(0.615, 0.19, 0.305, 0.91) 0s;z-index: -1} .nav-item-link-sec:hover, .popup-item-link-sec:hover, .share-item-link-sec:hover { color: var(--dark) } .nav-item-link-sec:hover:before, .popup-item-link-sec:hover:before, .share-item-link-sec:hover:before { width: 100%; left: 0 } .nav-last, .popup-last, .share-last { position: absolute; bottom: 40px; right: 60px }@media only screen and (min-width: 768px) and (max-width: 1023px) {.nav-last, .popup-last, .share-last { bottom: 30px; right: 40px }}@media only screen and (max-width: 767px) {.nav-last, .popup-last, .share-last { bottom: 10px; right: 25px }} .nav-last p, .popup-last p, .share-last p {text-align: left;color: var(--shade);font-size: 14px;line-height: 21px;-webkit-transform: translateY(100%);-moz-transform: translateY(100%);-ms-transform: translateY(100%);-o-transform: translateY(100%);transform: translateY(100%);opacity: 0} .nav-last p a, .popup-last p a, .share-last p a {color: var(--accent);-webkit-transition: all .25s ease-out 0s;-moz-transition: all .25s ease-out 0s;-ms-transition: all .25s ease-out 0s;-o-transition: all .25s ease-out 0s;transition: all .25s ease-out 0s} .nav-last p a:hover, .popup-last p a:hover, .share-last p a:hover { color: var(--yellow) } #filter {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: var(--back);visibility: hidden;z-index: -1;opacity: 0} #popup-filter {position: fixed;top: 0;right: 0;width: 100vw;height: 100vh;background: var(--back);visibility: hidden;z-index: -1;opacity: 0} #share-filter {position: fixed;top: 0;right: 0;width: 100vw;height: 100vh;background: var(--back);visibility: hidden;z-index: -1;opacity: 0} #download-filter {position: fixed;top: 0;right: 0;width: 100vw;height: 100vh;background: var(--back);visibility: hidden;z-index: -1;opacity: 0} .hidden {display: none !important} .visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px} .visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto} .invisible {visibility: hidden} .nodisplay { display: none } #zij-instromer-stappen {width: 100%;display:block;text-align: center;font-family: "GdG", "Raleway", sans-serif;.head {text-align: center;display: inline-block;background: var(--dark);color:white;font-size: 22px;padding: 15px;margin: 20px auto;@media (min-width: 768px) {font-size: 40px;}} .container {display: block;background: var(--shade);p {color: white;} .text-content {.column {@media (min-width: 768px) {max-width: 600px;padding-right: 15px;}}padding: 15px;text-align: left;p {max-width: 600px;margin-bottom: 15px;font-size: 95%;@media (min-width: 768px) {padding-left: 25px;padding-right: 25px;}} .step-2-last-p {margin-bottom: 60px;}}} .container-white {background-color: white;p {color: black;}}@media (min-width: 768px) {.container {display: grid;grid-template-columns: 1fr 1fr;}} .head-image {margin-bottom: 20px;max-width: 100%;} .container .read-more-container {padding-left: 0px;@media (min-width: 768px) {padding-left: 50px;}ul {list-style: none;padding: 0;margin: 10px 0 20px 40px;display: block;.link {margin-bottom: 8px;padding: 5px 10px;color: white;display: inline-block;background: var(--dark);border-radius: 5px;font-family: 'Raleway', sans-serif;box-shadow: 3px 2px #999;cursor: pointer;}}} .container-white .read-more-container ul .link {background: var(--purple);} .step-1 {.img-content {background-image: url("/assets/images/zijinstromerstappen/stappenplan_paars_back.png");background-repeat: no-repeat;background-position: left bottom;background-size: 100%;}@media (min-width: 768px) {background-size: 40%;}} .step-2 {.img-content {background-image: url("/assets/images/zijinstromerstappen/stappenplan_geel_back.png");background-repeat: no-repeat;background-position: left top;background-size: 100%;@media (min-width: 768px) {padding-top: 10px;}} .text-content {.step-2-last-p {margin-bottom: 60px;}}@media (min-width: 768px) {background-size: 40%;}} .step-3 {.img-content {@media (min-width: 768px) {padding-top: 40px;}}} .step-4 {.img-content {padding-top: 5px;} .text-content ul {margin: 10px 0 0 40px;}}}.bar-top { opacity: 0; background-color: var(--yellow); width: 100%; height: 75px; top: 0px; left: 0px; position: fixed; z-index: 9998;} .bar-top img { width: 59px; height: 50px; left: calc(50% - 35px); top: 12px; position: absolute; border: 0} .popup-bar-top { background-color: var(--yellow); width: 100%; height: 75px; top: 0px; left: 0px; position: fixed; z-index: 9998; border-top-left-radius: 15px; border-top-right-radius: 15px;} .popup-bar-top img { width: 59px; height: 50px; left: calc(50% - 35px); top: 12px; position: absolute; border: 0} #wrapper { top: 0px; left: calc(50% - var(--halfWidth)); position: absolute; min-height: 100%; } #blocks, #blocks1, #blocks2 { text-align: center ; } .hero { height: var(--h490); text-align: center; } .hero--image { height: var(--h490); } .hero--image img { height: var(--h490); width: var(--fullWidth) } .mobile .hero--image { height: auto; } .mobile .hero--image img { height: auto; } .hero--title { font-size: 40pt; top: 360px; left: 0px; position: absolute; font-family: "GdG"; opacity: 0;-webkit-transform: translate3d(100px, -100px, 0); -moz-transform: translate3d(-20px, -5px, 0); -ms-transform: translate3d(-20px, -5px, 0); -o-transform: translate3d(-20px, -5px, 0); transform: translate3d(-20px, -5px, 0)} .hero--sub { font-size: 16pt; top: 310px; left: 0px; position: absolute; font-family: "Raleway"; font-weight: bold; opacity: 0; -webkit-transform: translate3d(100px, -100px, 0); -moz-transform: translate3d(-20px, -5px, 0); -ms-transform: translate3d(-20px, -5px, 0); -o-transform: translate3d(-20px, -5px, 0); transform: translate3d(-20px, -5px, 0)} .mobile .hero--title { font-size: 22pt; top: 285px; left: 0px; position: absolute; font-family: "GdG"; opacity: 0;-webkit-transform: translate3d(100px, -100px, 0); -moz-transform: translate3d(-20px, -5px, 0); -ms-transform: translate3d(-20px, -5px, 0); -o-transform: translate3d(-20px, -5px, 0); transform: translate3d(-20px, -5px, 0)} .mobile .hero--sub { font-size: 11pt; top: 245px; left: 0px; position: absolute; font-family: "Raleway"; font-weight: bold; opacity: 0; -webkit-transform: translate3d(100px, -100px, 0); -moz-transform: translate3d(-20px, -5px, 0); -ms-transform: translate3d(-20px, -5px, 0); -o-transform: translate3d(-20px, -5px, 0); transform: translate3d(-20px, -5px, 0)} .bg--white .shade { background-image: url("/assets/images/bgs/shade-white@2.png"); background-repeat: repeat-x; background-size: 1px 35px;background-image: image-set(url("/assets/images/bgs/shade-white@2.webp") type("image/webp"),url("/assets/images/bgs/shade-white@2.png") type("image/png")); } .bg--back .shade { background-image: url("/assets/images/bgs/shade-back@2.png"); background-repeat: repeat-x; background-size: 1px 35px; background-image: image-set(url("/assets/images/bgs/shade-back@2.webp") type("image/webp"), url("/assets/images/bgs/shade-back@2.png") type("image/png")); } .bg--dark .shade { background-image: url("/assets/images/bgs/shade-dark@2.png"); background-repeat: repeat-x; background-size: 1px 35px; background-image: image-set(url("/assets/images/bgs/shade-dark@2.webp") type("image/webp"),url("/assets/images/bgs/shade-dark@2.png") type("image/png")); } .shade--white { background-image: url("/assets/images/bgs/shade-white@2.png"); background-repeat: repeat-x; background-size: 1px 35px;background-image: image-set(url("/assets/images/bgs/shade-white@2.webp") type("image/webp"),url("/assets/images/bgs/shade-white@2.png") type("image/png")); } .shade--back { background-image: url("/assets/images/bgs/shade-back@2.png"); background-repeat: repeat-x; background-size: 1px 35px; background-image: image-set(url("/assets/images/bgs/shade-back@2.webp") type("image/webp"),url("/assets/images/bgs/shade-back@2.png") type("image/png")); } .shade--dark { background-image: url("/assets/images/bgs/shade-dark@2.png"); background-repeat: repeat-x; background-size: 1px 35px; background-image: image-set(url("/assets/images/bgs/shade-dark@2.webp") type("image/webp"),url("/assets/images/bgs/shade-dark@2.png") type("image/png")); } .frontHeroes { opacity: 0;-webkit-transform: translate3d(100px, -100px, 0); -moz-transform: translate3d(-20px, -5px, 0); -ms-transform: translate3d(-20px, -5px, 0); -o-transform: translate3d(-20px, -5px, 0); transform: translate3d(-20px, -5px, 0)} .bs { box-shadow: 8px 8px 5px var(--shadeSec); } .bs-sec { box-shadow: 6px 6px 5px #d2d2d2; } .pre-bs { box-shadow: var(--shadeSec) 0px 8px 24px; } .video--size { width: var(--videoWidth); height: var(--videoHeight); } .verhaal--video { text-align: center; margin-left: auto; margin-right: auto; } .verhaal--head { font-size: 26pt; font-family: "GdG"; } .oplBox, .brochureBox { text-align: left; margin: 0 auto; line-height: 1.1; font-size: 21pt; font-weight: normal; display: inline-block;} .mobile .oplBox, .brochureBox { text-align: left; margin: 0 auto; line-height: 1.1; font-size: 16pt; font-weight: normal; display: inline-block;} #oplFilter { width: 1200px; background-color: var(--darkgreen); height: 50px; } #filterOpOpleiding, #filterOpDuur { width: 1200px; background-color: var(--darkgreen); height: 50px; color: var(--white); } .oplFilterIcon { float: left; height: 40px; padding-left: 10px; padding-top: 5px; } .oplFilterIcon img { width: 40px; height: 40px; } .mobile .oplFilterIcon { float: left; height: 20px; padding-left: 5px; padding-top: 13px; } .mobile .oplFilterIcon img { width: 20px; height: 20px; } .oplFilterText { padding-left: 10px; padding-top: 15px; width: 170px; height: 40px; font-family: 'GdG'; color: var(--white); font-size: 22pt; float: left; } .mobile .oplFilterText { padding-left: 10px; padding-top: 15px; width: 120px; height: 20px; font-family: 'GdG'; color: var(--white); font-size: 17pt; float: left; } .oplFilterDrop { cursor: pointer; cursor: hand; padding: 5px; margin-top: 12px; margin-right: 10px; color: var(--white); font-family: 'Raleway'; float: left; } .oplFilterDrop:hover { cursor: pointer; cursor: hand; background-color: var(--yellow); color: var(--white); } .filterOpt { cursor: pointer; cursor: hand; padding: 5px; margin-top: 10px; margin-right: 20px; background-color: var(--yellow); color: var(--white); font-family: 'Raleway'; float: left;} .filterOpt:hover { cursor: pointer; cursor: hand; background-color: var(--lightgreen); color: var(--white); } .oplListItem { width: 580px; height: 95px; filter: drop-shadow(7px 7px 4px #bdbdbd); margin: 10px; float: left; cursor: hand; cursor: pointer; }a .oplListItem, a:visited .oplListItem { color: var(--dark) } .mobile .oplListItem { width: calc(var(--fullWidth) - 20px); height: 95px; filter: drop-shadow(7px 7px 4px #bdbdbd); margin: 10px; float: left; } .itemLightGreen { background-color: var(--lightgreen); color: var(--white); float: left; } .itemYellow { background-color: var(--yellow); color: var(--white); float: left; } .oplListIcon { width: 95px; height: 95px; float: left } .oplListIcon img { width: 95px; height: 95px; border: 0px } .oplListText { width: 485px; float: left; text-align: left } .oplListInfo { width: 485px; height: 95px; float: left } .oplListInfoBox { float: left; width: 485px } .oplListTitle { padding: 15px; font-size: 14pt; width: 485px; text-align: left; font-weight: bold } .desktop .bg--yellow .oplListTitle:hover { color: var(--white) } .desktop .bg--accent .oplListTitle:hover { color: var(--white) } .mobile .oplListText { width: 220px; float: left; text-align: left; overflow: hidden; } .mobile .oplListInfo { width: 220px; height: 95px; float: left } .mobile .oplListInfoBox { float: left; width: 220px; } .mobile .oplListTitle { padding: 8px; font-size: 10pt; width: 220px; text-align: left; font-weight: bold } .oplListOpleiding { font-size: 10pt; float: left; padding-left: 15px; padding-right: 15px } .oplListSoort { font-size: 10pt; float: left; padding-left: 15px; padding-right: 15px } .oplListLengte { font-size: 10pt; float: left; padding-left: 15px; padding-right: 15px } .oplSmIcon { width: 20px; height: 20px; padding-right: 5px; margin-top: 5px } .mobile .oplListOpleiding { font-size: 8pt; float: left; padding-left: 6px; padding-right: 6px } .mobile .oplListSoort { font-size: 8pt; float: left; padding-left: 6px; padding-right: 6px } .mobile .oplListLengte { font-size: 8pt; float: left; padding-left: 6px; padding-right: 6px } .mobile .oplSmIcon { width: 16px; height: 16px; padding-right: 3px; margin-top: 3px } .desktop .contactBox { min-height: 761px; background-color: var(--white); } .mobile .contactBox { min-height: 566px; background-color: var(--white); } .leesVerderBtn a { color: var(--white); text-decoration: none } .leesVerderBtn a:hover { color: var(--yellow) } .quote { color: var(--yellow); font-size: 17pt; font-family: 'GdG', sans-serif } #filter-wrapper{ padding:24px 8px 0 24px; background-color: var(--white) } .filter label{ display:block; background: var(--white); border:1px solid var(--shade); color: var(--dark); margin-bottom: 10px; position: relative; padding: 4px 8px; font-size: 18px; font-family: 'Raleway'; } .filter label input{ position: absolute; right:8px; top:8px; } .filter label span{ position: absolute; right:8px; top:6px; width:16px; height:16px; border-radius:50%; } .filter label i{ display:inline-block; height:14px; width:14px; border-radius:50%; margin-right:8px; position:relative; top:2px; } .filter label i.type_1{ background: var(--yellow); position:relative; width:10px; height:10px; } .filter label i.type_2{ height:10px; width:10px; top:0; left:2px } .filter label i.type_2:after{ content:''; top:-5px; left:-5px; position:absolute; width:14px; height:14px; border-radius:50%; border:1px solid #fcb416; } .filter label i.type_3{ border-radius:0; width:16px; height:16px; border:1px solid #fcb416; top:3px; left:-3px; margin-right:2px }label.bounce span{ transition:linear 0.2s; opacity:0.7; }label.bounce:hover span{ opacity:1 } .is-expanded .btn--toggle:before{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)} .accordion-list{overflow:hidden;position:relative} .accordion-list__item{border-radius:2px} .accordion-list__item.is-readmore:hover{cursor:pointer;-webkit-transition:background .05s;transition:background .05s} .accordion-list--ol .accordion-list__item{counter-increment:accordion-counter} .accordion-list__tab{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;padding:.625rem .625rem .5rem 2rem;position:relative} .accordion-list__tab:after{clear:both;content:"";display:table} .accordion-list__tab:before{position:absolute} .accordion-list--ul .accordion-list__tab:before{background-color:var(--accent);border-radius:50%;content:"";height:.375rem;left:.5rem;top:1rem;width:.375rem} .accordion-list--ol .accordion-list__tab:before{color:var(--accent);content:counter(accordion-counter,decimal-leading-zero);font-family:'Raleway',Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;left:.3125rem;text-transform:uppercase;padding-top: 15px;} .mobile .accordion-list--ol .accordion-list__tab:before{ padding-top: 0px;} .accordion-list__heading{float:left;width:calc(100% - 20px);text-align: left;} .accordion-list__btn{background-color:transparent;border:0;cursor:pointer;height:24px;position:relative;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:30px} .accordion-list__btn:before{background:no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2391c63f" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><path d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path></svg>');content:"";height:7px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:12px} .accordion-list__tab.is-active .accordion-list__btn{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)} .accordion-list__panel{overflow:hidden;-webkit-transition:max-height .2s .1s;transition:max-height .2s .1s;-webkit-transition:all .25s;transition:all .25s} .accordion-list__panel.is-closed{max-height:0!important} .accordion-list__content{padding:0 2.5rem .625rem 1.875rem} .accordion-list__content>p{font-size:.875rem} .accordion-list__content>:last-child{margin-bottom:0} .accordion-ui{overflow:hidden;position:relative} .accordion-ui__item{background:#fff;border-radius:5px;margin-bottom:.625rem} .accordion-ui__tab{border-bottom:1px solid transparent;padding:1.25rem .9375rem;-webkit-transition:border-color .2s;transition:border-color .2s} .accordion-ui__tab:hover{cursor:pointer} .accordion-ui__tab.is-active{border-color:#dedede} .accordion-ui__heading{float:left;width:calc(100% - 20px)} .accordion-ui__btn{background:no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2391c63f" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><path d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path></svg>');border:0;height:100%;height:7px;text-indent:-9999em;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:10px;width:12px} .is-active .accordion-ui__btn{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)} .accordion-ui__panel{overflow:hidden;-webkit-transition:max-height .2s .1s;transition:max-height .2s .1s;-webkit-transition:all .25s;transition:all .25s} .accordion-ui__panel.is-closed{max-height:0!important} .accordion-ui__content{margin:0 .625rem} .accordion-ui__list-item{border-bottom:1px solid #e8e8e8;padding:.625rem .3125rem} .accordion-ui__list-item:last-child{border-bottom:0} .accordion-ui__subheading{color:var(--shade);font-size:1rem;line-height:1.4} .accordion-ui__data{color:var(--accent)}@media (min-width:750px){.accordion-list__tab{padding:.9375rem .9375rem .6875rem 2.5rem} .accordion-list--ol .accordion-list__tab:before{top:15px} .accordion-list--ul .accordion-list__tab:before{top:21px;-webkit-transform:scale(1.5);transform:scale(1.5)} .tabs__panel .accordion-list{padding-top:.625rem}}@media (min-width:850px){.accordion-list__tab{padding:.625rem 1.25rem .625rem 3.125rem} .accordion-list--ol .accordion-list__tab:before{top:10px} .accordion-list--ul .accordion-list__tab:before{top:17px} .accordion-list__content{padding:0 50px 10px} .accordion-list__content>p{font-size:1rem}} .faq-search__form{margin:0;max-width:none} .faq-search__input{border:1px solid #dadada}@media (min-width:750px){.faq-search__form{margin:0;max-width:none}} .faq-overview__item{background:#fff;-webkit-box-shadow:0 10px 40px 0 rgba(1,1,1,.05),0 1px 0 0 hsla(0,0%,91%,.004);box-shadow:0 10px 40px 0 rgba(1,1,1,.05),0 1px 0 0 hsla(0,0%,91%,.004);font-size:1.375rem;height:100%;position:relative;-webkit-transition:-webkit-box-shadow .2s ease-in-out,-webkit-transform .2s ease-in-out;transition:-webkit-box-shadow .2s ease-in-out,-webkit-transform .2s ease-in-out;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out,-webkit-box-shadow .2s ease-in-out,-webkit-transform .2s ease-in-out;width:100%} .faq-overview__item__title{font-size:1.25rem} .faq-overview__item__wrapper{height:100%;position:absolute;right:0;top:0;width:50px} .faq-overview__item__wrapper:after{background:#f6f6f6;content:"";height:80%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:3px} .faq-overview__item__count{color:var(--accent);font-family:'GdG';font-size:1.125rem;font-style:normal;font-weight:700;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .faq-overview__item:hover{-webkit-box-shadow:0 10px 40px 0 rgba(1,1,1,.1),0 1px 0 0 hsla(0,0%,91%,.008);box-shadow:0 10px 40px 0 rgba(1,1,1,.1),0 1px 0 0 hsla(0,0%,91%,.008);-webkit-transform:translateY(-2px);transform:translateY(-2px)}@media (min-width:1024px){.faq-overview__item__title{font-size:1.375rem} .faq-overview__item__wrapper{width:75px} .faq-overview__item__count{font-size:1.25rem}}@media (min-width:1280px){.faq-overview__item__title{font-size:1.5rem} .faq-overview__item__wrapper{width:100px}} .faq-category__item{border-radius:2px;border-top:1px solid #dadada} .faq-category__item:last-of-type{border-bottom:1px solid #dadada} .faq-category__tab{cursor:pointer;padding-right:30px;position:relative} .faq-category__tab:after{clear:both;content:"";display:table} .faq-category__heading{float:left;width:calc(100% - 20px)} .faq-category__btn{background:no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2391c63f" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><path d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path></svg>');border:0;cursor:pointer;height:100%;height:7px;position:absolute;right:.3125rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:30px;width:12px} .faq-category__tab.is-active .faq-category__btn { -webkit-transform: rotate(-180deg); transform:rotate(-180deg) } .faq-category__panel { overflow: hidden; -webkit-transition: max-height .2s .1s; transition: max-height .2s .1s; -webkit-transition: all .25s; transition:all .25s } .faq-category__panel.is-closed { max-height:0 !important } .faq-category__content > :last-child { margin-bottom:0 } .screenreader { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width:1px } #colofon { width: var(--fullWidth); background-color: var(--white); margin-bottom: 0px; clear: both; padding-top: 40px; padding-bottom: 0px; display: inline-block; } .colofonInner { width: var(--fullWidth) } .colofonVan { color: var(--darkgreen); width: var(--halfWidth); text-align: center; font-family: 'GdG'; font-size: 18pt; margin: 0 auto;} .colofonLogos { width: var(--w1000); margin: 0 auto; } .colofonLogo { float: left; width: calc(var(--w250) - 50px); height: calc(var(--w250) - 50px); margin: 25px; margin-bottom: 0px } .colofonLogo img { width: var(--w250 - 50px); height: calc(var(--w250) - 50px); border: 0px; cursor: hand; cursor: pointer; } .flogo, .flogo img { width: 150px; height: 127px; float: left; padding: 25px } .fcol { float: left; padding-top: 50px; padding-left: 50px } .fcol ul, .fcol li { list-style-type: none; margin: 5px; padding-bottom: 5px } .fcol li a, .fcol li a:visited { list-style-type: none; margin: 5px; padding-bottom: 5px; color: var(--white); text-decoration: none; } .fcol li a:hover { color: var(--yellow); text-decoration: underline; } .fico { float: left; margin: 10px; padding-top: 25px; } .icon-facebook-dark {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2324381a" id="facebook-dark" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6zM12.274 7.034h-1.443c-0.171 0-0.361 0.225-0.361 0.524v1.042h1.805l-0.273 1.486h-1.532v4.461h-1.703v-4.461h-1.545v-1.486h1.545v-0.874c0-1.254 0.87-2.273 2.064-2.273h1.443v1.581z"></path></svg>');height: 50px;width: 50px} .icon-facebook-dark:hover {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%23fcb416" id="facebook-accent" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6zM12.274 7.034h-1.443c-0.171 0-0.361 0.225-0.361 0.524v1.042h1.805l-0.273 1.486h-1.532v4.461h-1.703v-4.461h-1.545v-1.486h1.545v-0.874c0-1.254 0.87-2.273 2.064-2.273h1.443v1.581z"></path></svg>');height: 50px; width: 50px} .icon-linkedin-dark {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2324381a" id="linkedin-dark" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6zM7.65 13.979h-1.944v-6.256h1.944v6.256zM6.666 6.955c-0.614 0-1.011-0.435-1.011-0.973 0-0.549 0.409-0.971 1.036-0.971s1.011 0.422 1.023 0.971c0 0.538-0.396 0.973-1.048 0.973zM14.75 13.979h-1.944v-3.467c0-0.807-0.282-1.355-0.985-1.355-0.537 0-0.856 0.371-0.997 0.728-0.052 0.127-0.065 0.307-0.065 0.486v3.607h-1.945v-4.26c0-0.781-0.025-1.434-0.051-1.996h1.689l0.089 0.869h0.039c0.256-0.408 0.883-1.010 1.932-1.010 1.279 0 2.238 0.857 2.238 2.699v3.699z"></path></svg>');height: 50px;width: 50px} .icon-linkedin-dark:hover {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%23fcb416" id="linkedin-accent" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6zM7.65 13.979h-1.944v-6.256h1.944v6.256zM6.666 6.955c-0.614 0-1.011-0.435-1.011-0.973 0-0.549 0.409-0.971 1.036-0.971s1.011 0.422 1.023 0.971c0 0.538-0.396 0.973-1.048 0.973zM14.75 13.979h-1.944v-3.467c0-0.807-0.282-1.355-0.985-1.355-0.537 0-0.856 0.371-0.997 0.728-0.052 0.127-0.065 0.307-0.065 0.486v3.607h-1.945v-4.26c0-0.781-0.025-1.434-0.051-1.996h1.689l0.089 0.869h0.039c0.256-0.408 0.883-1.010 1.932-1.010 1.279 0 2.238 0.857 2.238 2.699v3.699z"></path></svg>');height: 50px; width: 50px} .icon-twitter-dark {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%2324381a" id="twitter-dark" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6zM13.905 8.264c0.004 0.082 0.005 0.164 0.005 0.244 0 2.5-1.901 5.381-5.379 5.381-1.068 0-2.062-0.312-2.898-0.85 0.147 0.018 0.298 0.025 0.451 0.025 0.886 0 1.701-0.301 2.348-0.809-0.827-0.016-1.525-0.562-1.766-1.312 0.115 0.021 0.233 0.033 0.355 0.033 0.172 0 0.34-0.023 0.498-0.066-0.865-0.174-1.517-0.938-1.517-1.854v-0.023c0.255 0.141 0.547 0.227 0.857 0.237-0.508-0.34-0.841-0.918-0.841-1.575 0-0.346 0.093-0.672 0.256-0.951 0.933 1.144 2.325 1.896 3.897 1.977-0.033-0.139-0.049-0.283-0.049-0.432 0-1.043 0.846-1.891 1.891-1.891 0.543 0 1.035 0.23 1.38 0.598 0.431-0.086 0.835-0.242 1.2-0.459-0.141 0.441-0.44 0.812-0.831 1.047 0.383-0.047 0.747-0.148 1.086-0.299-0.253 0.379-0.574 0.713-0.943 0.979z"></path></svg>');height: 50px;width: 50px} .icon-twitter-dark:hover {background: no-repeat 50% 50%;background-image: url('data:image/svg+xml;utf8,<svg fill="%23fcb416" id="twitter-accent" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6-4.298-9.6-9.6-9.6zM13.905 8.264c0.004 0.082 0.005 0.164 0.005 0.244 0 2.5-1.901 5.381-5.379 5.381-1.068 0-2.062-0.312-2.898-0.85 0.147 0.018 0.298 0.025 0.451 0.025 0.886 0 1.701-0.301 2.348-0.809-0.827-0.016-1.525-0.562-1.766-1.312 0.115 0.021 0.233 0.033 0.355 0.033 0.172 0 0.34-0.023 0.498-0.066-0.865-0.174-1.517-0.938-1.517-1.854v-0.023c0.255 0.141 0.547 0.227 0.857 0.237-0.508-0.34-0.841-0.918-0.841-1.575 0-0.346 0.093-0.672 0.256-0.951 0.933 1.144 2.325 1.896 3.897 1.977-0.033-0.139-0.049-0.283-0.049-0.432 0-1.043 0.846-1.891 1.891-1.891 0.543 0 1.035 0.23 1.38 0.598 0.431-0.086 0.835-0.242 1.2-0.459-0.141 0.441-0.44 0.812-0.831 1.047 0.383-0.047 0.747-0.148 1.086-0.299-0.253 0.379-0.574 0.713-0.943 0.979z"></path></svg>');height: 50px; width: 50px} .headBox { text-align: center; margin: 0 auto; } .clearfix { float: none; clear: both; } .headBoxInnerSmallY { background-color: var(--yellow); color: #000; font-family: 'GdG'; min-width: 200px;line-height: 1.1; font-size: 25pt; font-weight: bold; display:inline-block;padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px;} .headBoxInnerSmall { background-color: var(--dark); color: #fff; font-family: 'GdG'; min-width: 200px;line-height: 1.1; font-size: 25pt; font-weight: bold; display:inline-block;padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px;} .headBoxInnerWide { background-color: var(--dark); color: #fff; font-family: 'GdG'; min-width: 390px;line-height: 1.1; font-size: 25pt; font-weight: bold; display:inline-block;padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px;} .headBoxInnerMed { background-color: var(--dark); color: #fff; font-family: 'GdG'; min-width: 310px;line-height: 1.1; font-size: 25pt; font-weight: bold; display:inline-block;padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px;} .headBoxInner { background-color: var(--dark); color: #fff; font-family: 'GdG'; min-width: 240px;line-height: 1.1; font-size: 25pt; font-weight: bold; display:inline-block;padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px;} .headBoxInnerAlt { background-color: var(--shadeSec); color: #fff; font-family: 'GdG';min-width: 200px;line-height: 1.1; font-size: 25pt; font-weight: bold; display:inline-block;padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px;} .textAlinea { padding-left: 50px; padding-right: 50px; padding-top: 35px; padding-bottom: 0px; margin: 0 auto; } .textAlineaInner { line-height: 1.4; font-size: 14pt; text-align: justify; text-justify: inter-word; color: #fff; } .articleBlock { float: left; padding-bottom: 45px; overflow: hidden; } .articleBlockArt { float: left; padding-bottom: 35px; overflow: hidden; } .articlePhoto { z-index: 500; cursor: hand; cursor: pointer; background-color: var(--shadeSec);} .articleBeroep { background-color: var(--yellow); color: #fff; font-family: 'Gdg'; font-size: 20pt; z-index: 550; text-align: left; display:inline-block;} .articlePersons { background-color: #fff; color: #000; font-family: 'Gdg'; font-size: 16pt; z-index: 550; text-align: left; display:inline-block;} .articleQuote { color: #fff; font-size: 29pt; font-family: 'GdG'; z-index: 550; } .articleLink {background-color: var(--dark); } .articleLink:hover {background-color: var(--accent); } .articleLink a, .articleLink a:visited { text-decoration: none; color: #fff; font-family: 'GdG'; font-size: 20pt;z-index: 550; cursor: hand; cursor: pointer; z-index: 700;} .articleLink:hover { text-decoration: underline; cursor: hand; cursor: pointer;z-index: 700;} .articleMore { background-color: var(--yellow); color: #fff; z-index: 550; display:inline-block; } .articleHead { left: 0px; top: -630px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 20px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 1200px; height: 600px; } .articleBlockSizeArt { width: 1200px; height: 500px; } .articlePhotoSize { width: 1200px; height: 500px; margin-top: 15px; background-size: 1200px 500px; overflow: hidden; background-position: center;} .articleQuotePos { top: 410px; position: relative; } .articlePlaybutton { left: 550px; top: 165px; position: relative; width: 100px; height: 100px; z-index: 550; cursor: hand; cursor: pointer;background-size: 100px 100px; background-image: url(/assets/images/playbtn.png); background-repeat: no-repeat;} .articleLinks {height: 125px; top: 0px; left: 0px; position: relative; background-color: var(--shade); z-index: 530; } .articleLinkLeft { width: 500px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 35px; padding-bottom: 35px; } .articleLinkRight { width: 500px; margin-left: 165px; margin-top: 15px; z-index: 535; float: left; padding-top: 35px; padding-bottom: 35px; } .articleMorePos { left: -5px; top: -65px; position: relative; width: 200px; height: 40px; } .articleMoreInner { padding-top: 10px; padding-bottom: 5px; color: #000; font-family: 'GdG'; font-size: 18pt; z-index: 555;} .articleNav { width: 900px; height: 90px; padding-top: 20px; margin-left: auto; margin-right: auto; text-align: right; position: relative;} .articleNavLeft { height: 92px; overflow: hidden; } .articleNavMid { left: 360px; top: -50px; position: relative; } .articleNavRight { top: -132px; right: 0px; position: relative; display: inline-block; overflow: hidden; height: 92px; } .meerHead, .videoHead { text-align: center; background-color: var(--yellow); color: #000; text-transform: uppercase;font-family: 'Gdg'; font-size: 17pt; padding: 7px; width: 140px; height: 20px; overflow: hidden; } .videoHead { top: 0px; right: 0px; position: absolute;} .videoIcon { margin-left: 10px; width: 40px; height: 40px; background: no-repeat url(/assets/images/playbtn.png); background-size: 40px 40px; float: left; cursor: hand; cursor: pointer; } .videoInner { width: 110px; padding-right: 5px; padding-left: 10px; float: left; } .videoInnerB { width: 160px; padding-right: 5px; padding-left: 10px; float: left; text-align: right;} .meerText { background-color: var(--dark); padding: 7px; padding-top: 9px; max-width: 230px; height: 42px; } .videoText { background-color: var(--dark); padding: 7px; padding-top: 9px; width: 180px; height: 42px; top: 34px; right: 0px; position: relative; } .meerText a, .videoText a, .meerText a:visited, .videoText a:visited { color: #fff; text-transform: uppercase; font-family: 'Gdg'; font-size: 17pt; text-decoration: none; } .meerText a:hover, .videoText a:hover { text-decoration: underline; } .meerText { text-align: left; } .videoText { text-align: right; } .andereVerhalen { width: 150px; height: 22px; background-color: var(--dark); padding: 9px; text-align: center; } .andereVerhalen a, .andereVerhalen a:visited { color: #fff; text-decoration: none; text-transform: uppercase; font-family: 'GdG'; color: #fff; font-size: 18pt; } .andereVerhalen a:hover { text-decoration: underline; } #playerScreen { width: var(--windowWidth); height: var(--windowHeight); background: rgba(40, 55, 29, 0.85); z-index: 2250; top: 0px; left: 0px; position: absolute; } #playerWrapper { width: var(--videoWidth); height: var(--videoHeight); margin: 0 auto; position: relative; z-index: 2251; padding-top: var(--videoPadTop); } .playerCloseBtn { width: 25px; height: 50px; top: 35px; left: 35px; position: absolute; padding-top: -50px;font-size: 30pt; font-weight: bold; color: var(--accent); z-index: 2252; cursor: hand; cursor: pointer; } .playerCloseBtn:hover { color: var(--yellow);cursor: hand; cursor: pointer; } #player { z-index: 2253; width: var(--videoWidth); height: var(--videoHeight); margin: 0 auto; } #activationWrapper { width: 100%; text-align: center; left: 0px; bottom: 0px; position: fixed; height: 100px; z-index: 900; } #activation { margin-left: auto; margin-right: auto; width: 575px; height: 100px; z-index: 901; bottom: 0px; position: block; overflow: hidden;} .actHead { background-color: var(--dark); color: #fff; font-family: 'GdG'; font-size: 18pt; text-align: center;} .actBtn { background-color: var(--yellow); padding-top: 15px; padding-bottom: 30px;text-transform: uppercase; float: left; text-align: center; cursor: hand; cursor: pointer; } .actBtn:hover { color: var(--white); background-color: var(--accent); } .actBtn h3 a, .actBtn h3 a:visited { text-decoration: none; color: var(--dark); font-family: 'GdG'; font-size: 28pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 200px; padding-top: 12px; padding-bottom: 10px; position: relative; width: 150px; height: 20px; z-index: 910;} .opleidingenBtn { top: -30px; left: 0px; position: relative; width: 275px; z-index: 905; } .vacaturesBtn { top: -30px; margin-left: 25px; position: relative; width: 275px; z-index: 905; }@media only screen and (max-width: 393px) and (orientation: portrait) {#wrapper { top: 0px; left: 0px; } .hero--title {font-size: 24pt; top: 370px; width: 373px; left: calc(50% - 185px); } .hero--sub {font-size: 9pt; top: 330px; width: 373px; left: calc(50% - 185px); } #blocks, #blocks1, #blocks2 { width: var(--fullWidth); margin-top: 0px; margin-left:auto; margin-right:auto; position: relative;} .articleBlockSize { width: var(--fullWidth); height: 409px; } .articleBlockSizeArt { width: var(--fullWidth); height: 307px; } .articlePhotoSize { width: var(--fullWidth); height: 307px; margin-top: 15px; background-size: 736px 307px; overflow: hidden; background-position: center;} .articleLinks { width: var(--fullWidth); top: 0px; left: 0px; position: relative; z-index: 530; overflow: hidden; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { margin-left: 7px; }}@media only screen and (max-width: 390px) and (orientation: portrait) {#wrapper { top: 0px; left: 0px; } .hero--title {font-size: 24pt; top: 370px; width: 370px; left: calc(50% - 185px); } .hero--sub {font-size: 9pt; top: 330px; width: 370px; left: calc(50% - 185px); } #blocks, #blocks1, #blocks2 { width: var(--fullWidth); margin-top: 0px; margin-left:auto; margin-right:auto; position: relative;} .articleBlockSize { width: var(--fullWidth); height: 409px; } .articleBlockSizeArt { width: var(--fullWidth); height: 307px; } .articlePhotoSize { width: var(--fullWidth); height: 307px; margin-top: 15px; background-size: 736px 307px; overflow: hidden; background-position: center;} .articleLinks { width: var(--fullWidth); top: 0px; left: 0px; position: relative; z-index: 530; overflow: hidden; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { margin-left: 7px; }} @media only screen and (max-width: 1112px) and (orientation: landscape) {#blocks, #blocks1, #blocks2 { width: 1112px; margin-top: 0px; } .articleHead { left: 0px; top: -600px; position: relative; text-align: left; } .articleBlockSize { width: 1112px; height: 594px; } .articleBlockSizeArt { width: 1112px; height: 463px; } .articlePhotoSize { width: 1112px; height: 463px; margin-top: 15px; background-size: 1112px 463px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 500px; top: 185px; position: relative; width: 80px; height: 80px; z-index: 550;background-size: 80px 80px; background-image: url(/assets/images/playbtn.png); } .articleQuotePos { top: 370px; } .articleLinks { width: 1112px; height: 125px; } .articleLinkLeft { width: 464px; margin-left: 15px; margin-top: 15px; } .articleLinkRight { width: 464px; margin-left: 150px; margin-top: 15px; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 225px; ; } .vacaturesBtn { top: -20px; margin-left: 25px; position: relative; width: 225px; }} @media only screen and (max-width: 1080px) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 1080px; margin-top: 0px; } .articleHead { left: 0px; top: -538px; position: relative; text-align: left; } .articleBlockSize { width: 1080px; height: 581px; } .articleBlockSizeArt { width: 1080px; height: 450px; } .articlePhotoSize { width: 1080px; height: 450px; margin-top: 15px; background-size: 1080px 450px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 500px; top: 185px; position: relative; width: 80px; height: 80px; z-index: 550;background-size: 80px 80px; background-image: url(/assets/images/playbtn.png); } .articleQuotePos { top: 350px; } .articleLinks { width: 1080px; height: 125px; } .articleLinkLeft { width: 450px; margin-left: 15px; margin-top: 15px; } .articleLinkRight { width: 450px; margin-left: 150px; margin-top: 15px; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; width: 480px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 17pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 225px; ; } .vacaturesBtn { top: -20px; margin-left: 25px; position: relative; width: 225px; }} @media only screen and (max-width: 1024px) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 1024px; margin-top: 0px; } .articleHead { left: 0px; top: -568px; position: relative; text-align: left; } .articleBlockSize { width: 1024px; height: 558px; } .articleBlockSizeArt { width: 1024px; height: 427px; } .articlePhotoSize { width: 1024px; height: 427px; margin-top: 15px; background-size: 1024px 427px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 472px; top: 173px; position: relative; width: 80px; height: 80px; z-index: 550;background-size: 80px 80px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 25pt; z-index: 550; } .articleQuotePos { top: 360px; } .articleLinks { width: 1024px; height: 125px; } .articleLinkLeft { width: 420px; margin-left: 15px; margin-top: 15px; } .articleLinkRight { width: 420px; margin-left: 150px; margin-top: 15px; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; width: 480px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 15pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 225px; ; } .vacaturesBtn { top: -20px; margin-left: 25px; position: relative; width: 225px; }}@media only screen and (max-width: 834px) and (orientation: portrait) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 650px; margin-top: 0px; } .articleHead { left: 0px; top: -404px; position: relative; text-align: left; } .articleBlockSize { width: 650px; height: 389px; } .articleBlockSizeArt { width: 650px; height: 271px; } .articlePhotoSize { width: 650px; height: 271px; margin-top: 15px; background-size: 650px 271px; overflow: hidden; background-position: center; } .articlePlaybutton { left: 280px; top: 100px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 25pt; } .articleQuotePos { top: 220px; position: relative; } .articleLinks { width: 650px; height: 118px; top: 0px; left: 0px; position: relative; } .articleLink, .articleLink a, .articleLink a:visited { font-size: 13.5pt; z-index: 550; } .articleLinkLeft { width: 275px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 35px; padding-bottom: 35px; } .articleLinkRight { width: 275px; margin-left: 70px; margin-top: 15px; z-index: 535; float: left; padding-top: 35px; padding-bottom: 35px; } .articleMorePos { left: 0px; top: -67px; position: relative; width: 100px; height: 35px; } .articleMoreInner { padding-top: 10px; padding-bottom: 5px; font-size: 16pt; z-index: 555;} #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; width: 473px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 15pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 225px; ; } .vacaturesBtn { top: -20px; margin-left: 25px; position: relative; width: 225px; }} @media only screen and (max-width: 768px) and (orientation: portrait) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 768px; margin-top: 0px; } .articleHead { left: 0px; top: -454px; position: relative; text-align: left; } .articleBlockSize { width: 768px; height: 438px; } .articleBlockSizeArt { width: 768px; height: 438px; } .articlePhotoSize { width: 768px; height: 320px; margin-top: 15px; background-size: 768px 320px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 359px; top: 90px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 25pt; } .articleQuotePos { top: 250px; position: relative; } .articleLinks { width: 768px; height: 118px; top: 0px; left: 0px; position: relative; } .articleLink, .articleLink a, .articleLink a:visited { font-size: 16pt; } .articleLinkLeft { width: 335px; margin-left: 14px; margin-top: 15px; float: left; padding-top: 35px; padding-bottom: 35px; } .articleLinkRight { width: 335px; margin-left: 71px; margin-top: 15px; float: left; padding-top: 35px; padding-bottom: 35px; } .articleMorePos { left: -2px; top: -62px; position: relative; width: 110px; height: 35px; } .articleMoreInner { padding-top: 10px; padding-bottom: 5px; font-size: 16pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; width: 473px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 15pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 225px; ; } .vacaturesBtn { top: -20px; margin-left: 25px; position: relative; width: 225px; }}@media only screen and (min-width: 570px) and (max-width: 899px) and (orientation: portrait) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: var(--fullWidth); margin-top: 0px; } .articleHead { left: 0px; top: -454px; position: relative; text-align: left; } .articleBlockSize { width: var(--fullWidth); height: 438px; } .articleBlockSizeArt { width: var(--fullWidth); height: 438px; } .articlePhotoSize { width: var(--fullWidth); height: 320px; margin-top: 15px; background-size: var(--fullWidth) calc(var(--fullWidth)*0.417); overflow: hidden; background-position: center; background-repeat: no-repeat; } .articlePlaybutton { left: 42%; top: 90px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 25pt; } .articleQuotePos { top: 250px; position: relative; } .articleLinks { width: var(--fullWidth); height: 118px; top: 0px; left: 0px; position: relative; } .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt; } .articleLinkLeft { width: 49%; margin-left: 4px; margin-top: 15px; float: left; padding-top: 35px; padding-bottom: 35px; } .articleLinkRight { width: 49%; margin-left: 4px; margin-top: 15px; float: left; padding-top: 35px; padding-bottom: 35px; } .articleMorePos { display: none; left: -2px; top: -62px; position: relative; width: 110px; height: 35px; } .articleMoreInner { padding-top: 10px; padding-bottom: 5px; font-size: 16pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; width: 480px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 16pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 225px; ; } .vacaturesBtn { top: -20px; margin-left: 25px; position: relative; width: 225px; }} @media only screen and (max-width: 736px) and (orientation: landscape) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 736px; margin-top: 0px; } .articleHead { left: 0px; top: -415px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 20px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 736px; height: 409px; } .articleBlockSizeArt { width: 736px; height: 307px; } .articlePhotoSize { width: 736px; height: 307px; margin-top: 15px; background-size: 736px 307px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 333px; top: 118px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 25pt; } .articleQuotePos { top: 220px; position: relative; } .articleLinks { width: 736px; height: 89px; top: 0px; left: 0px; position: relative; z-index: 530; overflow: hidden; } .articleLink { height: 30px; margin-top: 15px; float: left; padding-top: 15px; padding-bottom: 15px; } .articleLink a, .articleLink a:visited { font-size: 14pt; text-align: center; } .articleLinkLeft { width: 318px; margin-left: 15px; float: left; z-index: 535;} .articleLinkRight { width: 318px; margin-left: 70px; float: left; z-index: 535;} .articleMorePos { left: 0px; top: -48px; position: relative; width: 90px; height: 35px; } .articleMoreInner { padding-top: 10px; padding-bottom: 5px; font-size: 16pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation {width: 472px; height: 100px;} .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 223px; } .vacaturesBtn { top: -20px; margin-left: 24px; position: relative; width: 223px; }} @media only screen and (max-width: 734px) and (orientation: landscape) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 734px; margin-top: 0px; } .articleHead { left: 0px; top: -415px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 20px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 734px; height: 409px; } .articleBlockSizeArt { width: 734px; height: 307px; } .articlePhotoSize { width: 734px; height: 307px; margin-top: 15px; background-size: 736px 307px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 333px; top: 118px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 25pt; } .articleQuotePos { top: 220px; position: relative; } .articleLinks { width: 734px; height: 89px; top: 0px; left: 0px; position: relative; z-index: 530; overflow: hidden; } .articleLink { height: 30px; margin-top: 15px; float: left; padding-top: 15px; padding-bottom: 15px; } .articleLink a, .articleLink a:visited { font-size: 14pt; text-align: center; } .articleLinkLeft { width: 318px; margin-left: 15px; float: left; z-index: 535;} .articleLinkRight { width: 318px; margin-left: 70px; float: left; z-index: 535;} .articleMorePos { left: 0px; top: -48px; position: relative; width: 90px; height: 35px; } .articleMoreInner { padding-top: 10px; padding-bottom: 5px; font-size: 16pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { width: 472px; height: 100px; } .actHead { font-size: 20pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 150px; width: 175px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 223px; } .vacaturesBtn { top: -20px; margin-left: 23px; position: relative; width: 222px; }}@media only screen and (min-width: 320px) and (max-width: 414px) {#blocks, #blocks1, #blocks2 { width: 375px; margin-top: 0px; } .headBoxInner { font-size: 20pt; } .articleHead { left: 0px; top: -525px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 375px; height: 510px; } .articleBlockSizeArt { width: 375px; height: 365px; } .articlePhotoSize { width: 375px; height: 365px; margin-top: 15px; background-size: 876px 365px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 152px; top: 147px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 16pt; z-index: 550; } .articleQuotePos { top: 320px; position: relative; } .articleLinks { width: 375px; height: 155px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt;z-index: 550; cursor: hand; cursor: pointer;} .articleLinkLeft, .articleLinkRight { width: 350px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMorePos { left: -165px; top: -75px; position: relative; width: 100px; height: 30px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 8px; font-size: 15pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; margin-left: 7px; } .actHead { font-size: 18pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 111px; width: 150px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 180px; ; } .vacaturesBtn { top: -20px; margin-left: 14px; position: relative; width: 180px; }} @media only screen and (min-width: 414px) and (max-width: 414px) {#wrapper { top: 0px; left: 0px; } .hero--title {font-size: 24pt; top: 370px; width: 370px; left: calc(50% - 185px); } .hero--sub {font-size: 9pt; top: 330px; width: 370px; left: calc(50% - 185px); } #blocks, #blocks1, #blocks2 { width: 414px; margin-top: 0px; } .headBoxInner { font-size: 20pt; } .articleHead { left: 0px; top: -565px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 414px; height: 548px; } .articleBlockSizeArt { width: 414px; height: 403px; } .articlePhotoSize { width: 414px; height: 403px; margin-top: 15px; background-size: 967px 403px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 172px; top: 166px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 16pt; z-index: 550; } .articleQuotePos { top: 350px; position: relative; } .articleLinks { width: 414px; height: 145px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt;z-index: 550; } .articleLinkLeft, .articleLinkRight { width: 385px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMorePos { left: -187px; top: -69px; position: relative; width: 100px; height: 30px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 8px; font-size: 15pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; margin-left: 7px; } .actHead { font-size: 18pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 132px; width: 150px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 199px; ; } .vacaturesBtn { top: -20px; margin-left: 15px; position: relative; width: 199px; }} @media only screen and (max-height: 560px) and (max-width: 360px) {#wrapper { top: 0px; left: 0px; } .hero--title {font-size: 23pt; top: 370px; width: 340px; left: calc(50% - 170px); } .hero--sub {font-size: 9pt; top: 330px; width: 340px; left: calc(50% - 170px); } #blocks, #blocks1, #blocks2 { width: 360px; margin-top: 0px; } .headBoxInner { font-size: 20pt; } .articleHead { left: 0px; top: -525px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 360px; height: 495px; } .articleBlockSizeArt { width: 360px; height: 350px; } .articlePhotoSize { width: 360px; height: 350px; margin-top: 15px; background-size: 840px 350px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 145px; top: 135px; position: relative; width: 70px; height: 70px; z-index: 550;background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 16pt; z-index: 550; } .articleQuotePos { top: 320px; position: relative; } .articleLinks { width: 360px; height: 145px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt; z-index: 550; } .articleLinkLeft, .articleLinkRight { width: 330px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMorePos { left: -160px; top: -69px; position: relative; width: 100px; height: 30px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 8px; font-size: 15pt; } #activationWrapper { height: 100px; width: var(--windowWidth); } #activation { height: 100px; margin-left: 7px; } .actHead { font-size: 18pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 111px; width: 150px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 175px; ; } .vacaturesBtn { top: -20px; margin-left: 10px; position: relative; width: 175px; }} @media only screen and (max-width: 375px) {#wrapper { top: 0px; left: 0px; } .hero--title {font-size: 23pt; top: 370px; width: 355px; left: calc(50% - 177px); } .hero--sub {font-size: 9pt; top: 330px; width: 355px; left: calc(50% - 177px); }} @media only screen and (max-width: 320px) {#wrapper { top: 0px; left: 0px; } .hero--title {font-size: 22pt; top: 370px; width: 300px; left: calc(50% - 150px); } .hero--sub {font-size: 9pt; top: 330px; width: 300px; left: calc(50% - 150px); } .headBoxInner { font-size: 16pt; } .articleHead { left: 0px; top: -467px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { height: 443px; } .articleBlockSizeArt { height: 443px; } .articlePhotoSize { margin-top: 15px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 135px; top: -130px; position: relative; width: 50px; height: 50px; z-index: 550; cursor: hand; cursor: pointer;background-size: 50px 50px; background-image: url(/assets/images/playbtn.png); } .articleQuote { color: #fff; font-size: 16pt; font-family: 'GdG'; z-index: 550; } .articleQuotePos { top: 270px; position: relative; } .articleLinks { height: 145px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt;z-index: 550; } .articleLinkLeft,.articleLinkRight { width: 295px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMorePos { left: -140px; top: -67px; position: relative; width: 100px; height: 25px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 5px; font-size: 14pt; } #activationWrapper { height: 78px;width: var(--windowWidth); } #activation { height: 78px; } .actHead { font-size: 16pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 105px; width: 110px; height: 20px; padding-top: 5px; padding-bottom: 5px; } .opleidingenBtn { top: -15px; left: 0px; position: relative; width: 155px; ; } .vacaturesBtn { top: -15px; margin-left: 9px; position: relative; width: 155px; }}@media only screen and (max-width: 667px) and (orientation: landscape) {#wrapper { top: 0px; left: 0px; } .headBoxInner { font-size: 16pt; } .textAlinea { padding-left: 15px; padding-right: 15px; padding-top: 35px; padding-bottom: 0px; margin: 0 auto; width: 450px; } .articleHead { left: 0px; top: -385px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { height: 368px; } .articleBlockSizeArt { height: 278px; } .articlePhotoSize { margin-top: 15px; overflow: hidden; } .articlePlaybutton { left: 308px; top: -113px; position: relative; width: 50px; height: 50px; z-index: 550; cursor: hand; cursor: pointer;background-size: 50px 50px; background-image: url(/assets/images/playbtn.png); } .articleQuotePos { top: 240px; position: relative; } .articleLinks { height: 90px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 13pt; z-index: 550; } .articleLinkLeft,.articleLinkRight { width: 312px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 20px; padding-bottom: 15px; } .articleMorePos { left: 0px; top: -47px; position: relative; width: 100px; height: 25px; } .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 5px; font-size: 14pt; } #activationWrapper { height: 78px; width: var(--windowWidth); } #activation { height:78px;} .actHead { font-size: 16pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 105px; width: 110px; height: 20px; padding-top: 5px; padding-bottom: 5px; } .opleidingenBtn { top: -15px; left: 0px; position: relative; width: 155px; ; } .vacaturesBtn { top: -15px; margin-left: 9px; position: relative; width: 155px; }}@media only screen and (max-width: 568px) and (orientation: landscape) {#wrapper { top: 0px; left: 0px; } #blocks, #blocks1, #blocks2 { width: 320px; margin-top: 0px; } .textBox { width: 320px; padding-top: 25px; text-align: center; } .headBoxInner { font-size: 16pt; } .textAlinea { padding-left: 15px; padding-right: 15px; padding-top: 35px; padding-bottom: 0px; margin: 0 auto;width: 270px; } .articleHead { left: 0px; top: -467px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 320px; height: 443px; } .articleBlockSizeArt { width: 320px; height: 443px; } .articlePhotoSize { width: 320px; height: 311px; margin-top: 15px; background-size: 746px 311px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 135px; top: 130px; position: relative; width: 50px; height: 50px; z-index: 550;background-size: 50px 50px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 16pt; z-index: 550; } .articleQuotePos { top: 270px; position: relative; } .articleLinks { width: 320px; height: 145px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt;z-index: 550; } .articleLinkLeft,.articleLinkRight { width: 295px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMore { background-color: #fcb416; color: #000; z-index: 550; } .articleMorePos { left: -140px; top: -67px; position: relative; width: 100px; height: 25px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 5px; font-size: 14pt; } #activationWrapper { width: var(--windowWidth); text-align: center; left: 0px; bottom: 0px; position: fixed; height: 80px; z-index: 900; } #activation { height: 80px; z-index: 901; bottom: 0px; position: block; overflow: hidden;} .actHead { font-size: 14pt; text-align: center;} .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 221px; padding-top: 8px; padding-bottom: 5px; position: relative; width: 125px; height: 22px; z-index: 910;} .opleidingenBtn { top: -30px; left: 0px; position: relative; width: 271px; ; z-index: 905; } .vacaturesBtn { top: -30px; margin-left: 21px; position: relative; width: 271px; z-index: 905; }}@media only screen and (-webkit-min-device-pixel-ratio: 4) {@media only screen and (max-width: 413px) { #wrapper { top: 0px; left: 0px; } .hero--title {font-size: 23pt; top: 370px; width: 340px; left: calc(50% - 170px); } .hero--sub {font-size: 9pt; top: 330px; width: 340px; left: calc(50% - 170px); } .mobile .oplFilterText { padding-left: 10px; padding-top: 15px; width: 120px; height: 20px; font-family: 'GdG'; color: var(--white); font-size: 13pt; float: left; } .mobile .oplBox, .brochureBox { text-align: left; margin: 0 auto; line-height: 1.1; font-size: 14pt; font-weight: normal; display: inline-block;} #niveauO,#duurO { font-size: 14pt; } #blocks, #blocks1, #blocks2 { width: 412px; margin-top: 0px; } .headBoxInner { font-size: 20pt; } .articleHead { left: 0px; top: -525px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 412px; height: 495px; } .articleBlockSizeArt { width: 412px; height: 350px; } .articlePhotoSize { width: 412px; height: 350px; margin-top: 15px; background-size: 840px 412px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 145px; top: 135px; position: relative; width: 70px; height: 70px; z-index: 550; background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 16pt; z-index: 550; } .articleQuotePos { top: 320px; position: relative; } .articleLinks { width: 412px; height: 145px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt; z-index: 550; } .articleLinkLeft, .articleLinkRight { width: 330px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMorePos { left: -160px; top: -69px; position: relative; width: 100px; height: 30px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 8px; font-size: 15pt; } #activationWrapper { height: 100px; width: 412px; } #activation { height: 100px; margin-left: 7px; } .actHead { font-size: 18pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 111px; width: 150px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 175px; ; } .vacaturesBtn { top: -20px; margin-left: 10px; position: relative; width: 175px; }}@media only screen and (max-width: 393px) { #wrapper { top: 0px; left: 0px; } .hero--title {font-size: 23pt; top: 370px; width: 340px; left: calc(50% - 170px); } .hero--sub {font-size: 9pt; top: 330px; width: 340px; left: calc(50% - 170px); } .mobile .oplFilterText { padding-left: 10px; padding-top: 15px; width: 120px; height: 20px; font-family: 'GdG'; color: var(--white); font-size: 13pt; float: left; } .mobile .oplBox, .brochureBox { text-align: left; margin: 0 auto; line-height: 1.1; font-size: 14pt; font-weight: normal; display: inline-block;} #niveauO,#duurO { font-size: 14pt; } #blocks, #blocks1, #blocks2 { width: 393px; margin-top: 0px; } .headBoxInner { font-size: 20pt; } .articleHead { left: 0px; top: -525px; position: relative; text-align: left; } .articleBeroepSize { padding-left: 15px; padding-top: 20px; padding-bottom: 10px; padding-right: 15px;} .articlePersonSize { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; padding-right: 15px;} .articleBlockSize { width: 393px; height: 495px; } .articleBlockSizeArt { width: 393px; height: 350px; } .articlePhotoSize { width: 393px; height: 350px; margin-top: 15px; background-size: 840px 393px; overflow: hidden; background-position: center;} .articlePlaybutton { left: 145px; top: 135px; position: relative; width: 70px; height: 70px; z-index: 550; background-size: 70px 70px; background-image: url(/assets/images/playbtn.png); } .articleQuote { font-size: 16pt; z-index: 550; } .articleQuotePos { top: 320px; position: relative; } .articleLinks { width: 393px; height: 145px; top: 0px; left: 0px; position: relative; float: left;} .articleLink, .articleLink a, .articleLink a:visited { font-size: 14pt; z-index: 550; } .articleLinkLeft, .articleLinkRight { width: 330px; margin-left: 15px; margin-top: 15px; z-index: 535; float: left; padding-top: 15px; padding-bottom: 15px; } .articleMorePos { left: -160px; top: -69px; position: relative; width: 100px; height: 30px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .articleMoreInner { padding-left: 5px; padding-right: 5px; padding-top: 8px; font-size: 15pt; } #activationWrapper { height: 100px; width: 412px; } #activation { height: 100px; margin-left: 7px; } .actHead { font-size: 18pt; } .actBtn h3 a, .actBtn h3 a:visited { font-size: 20pt; margin: 0; padding: 0;} .aandeslag { top: 0px; left: 111px; width: 150px; height: 20px; } .opleidingenBtn { top: -20px; left: 0px; position: relative; width: 175px; ; } .vacaturesBtn { top: -20px; margin-left: 10px; position: relative; width: 175px; }}} .text-blocks {display: flex;gap: 20px;flex-wrap: wrap;} .text-blocks > div {flex: 1;color: white;width: 50%;}@media (max-width: 768px) {.text-blocks {flex-direction: column;} .text-blocks > div {min-width: 100%;}} .newComers {.articleBeroep {background: var(--purple);}} .newComersStories {.hero--sub {background: var(--red);color: white;} .quote {color: black;background: var(--lightGreen);padding: 10px;display: inline-block;margin-bottom: 15px;text-align: center;}} .footer-videos {gap: 0;margin-top: 20px;}@media (max-width: 768px) {.footer-videos {gap: 20px;margin-top: 10px;}} .video-container {position: relative;min-height: 250px;} .video-title {background: var(--purple);color: white;padding: 8px 15px;display: inline-block;font-family: 'Gdg';font-size: 20pt;} .video-name {background: white;color: var(--purple);padding: 8px 15px;display: inline-block;font-family: 'Gdg';font-size: 16pt;} .video-play-button {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 60px;height: 60px;background-size: 60px 60px;background-image: url(/assets/images/playbtn.png);background-repeat: no-repeat;cursor: pointer;} .video-subtitle {padding: 8px 30px;font-family: 'Gdg';font-size: 18pt;text-align: center;} .video-cta-button {padding: 5px 10px;margin: 10px 0;display: inline-block;}@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ), only screen and (min--moz-device-pixel-ratio: 1.3 ), only screen and (-o-min-device-pixel-ratio: 2.6/2 ),only screen and ( min-device-pixel-ratio: 1.3 ), only screen and ( min-resolution: 124.8dpi ), only screen and ( min-resolution: 1.3dppx ) {}