/* FONTS  */
@font-face {
    font-family: 'Filson Soft';
    src: url('fonts/filson/FilsonSoftBook.woff2') format('woff2'),
    url('fonts/filson/FilsonSoftBook.woff') format('woff');
    font-weight: 300;
}
@font-face {
    font-family: 'Filson Soft';
    src: url('fonts/filson/FilsonSoftRegular.woff2') format('woff2'),
    url('fonts/filson/FilsonSoftRegular.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'Filson Soft';
    src: url('fonts/filson/FilsonSoftMedium.woff2') format('woff2'),
    url('fonts/filson/FilsonSoftMedium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Filson Soft';
    src: url('fonts/filson/FilsonSoft-Bold.woff2') format('woff2'),
    url('fonts/filson/FilsonSoft-Bold.woff') format('woff');
    font-weight: 600;
}
@font-face {
    font-family: 'Spencer';
    src: url('fonts/spencer/Spencer-Regular.woff2') format('woff2'),
    url('fonts/spencer/Spencer-Regular.woff') format('woff');
    font-weight: 300;
}


body {
    font-family: 'Filson Soft', sans-serif;
}

/* GENERAL */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

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

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font-size: 100%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

::selection,
::-moz-selection {
    background: rgba(0,175,178,0.25);
    color: #202223;
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

hr {
    width: 100%;
    height: 1px;
    border: 0;
    margin: 20px 0;
    padding: 0;
    clear: both;
    border-bottom: 1px solid #DDD;
}

/*

Tulip 				#f48e8b
Emerald green 		#00afb2
Raisin black 		#202223

*/

*,
html,
body,
input {
    color: #202223;
}

*, html, body, input {
    font-family: 'Filson Soft', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 28px;
    color: #202223;
}
body {
    padding-top: 130px;
}
body.main-home,
body.school,
body.thuis{
    overflow: hidden;
}


.font-weight-medium {
    font-weight: 600;
}
.font-weight-bold {
    font-weight: 600;
}
.content p a {
    color: #00afb2;
}
.single-support .content ul,
.content ol,
.content ul {
    margin: 0 0 15px 0;
}
.content ol li {
    margin-left: 20px;
    padding-left: 5px;
    list-style-type: decimal;
}
.content ul li {
    margin-left: 20px;
    padding-left: 5px;
    list-style: disc;
}
.content ol.no-margin li, .content ul.no-margin li {
    margin-left: 0px;
}
.info-wrapper {
    background: #FFF;
    padding: 20px 30px!important;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px 0px rgba(0,0,0,0.15);
}
.check {
    display: inline-block;
    width: 30px;
    height: 20px;
    position: relative;
    margin-right: 5px;
}
.check:before {
    content: "";
    display: block;
    position: absolute;
    border-left: 4px solid #202223;
    border-bottom: 4px solid #202223;
    transform: rotate(-45deg);
    width: 15px;
    height: 8px;
    top: 2px;
}
.font-emerald .check:before{
    border-left: 4px solid #00afb2;
    border-bottom: 4px solid #00afb2;
}
.font-white .check:before {
    border-left: 4px solid #FFF;
    border-bottom: 4px solid #FFF;
}

/* EINDE GENERAL */

/* GRID */

/* LEGACY */

section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    padding: 40px 0;
}
.row {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 90px 0;
    flex-wrap: wrap;
}
    .first-contact .row {
        margin:0;
    }

.no-margin-top {
    margin-top: 0!important;
}
.container {
    width: 100%;
    max-width: 1150px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.home section.content,
.home section {
    padding: 50px 0;
}
.blog section.text,
.blog-home section {
    padding:0;
}

.blog-home section.footer {
    padding: 75px 0;
}
/* LAYOUT */

.vh-100  {
    height: 100vh;
}
.vh-75  {
    height: 75vh;
}
.vw-100  {
    width: 100vw;
}
.flex {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.center,
.flex-center {
    justify-content: center;
}
.flex-stretch{
    align-content: stretch;
}
.space-between,
.flex-space-between{
    justify-content: space-between;
}
.flex-end{
    justify-content: flex-end;
}
.flex-space-around{
    justify-content: space-around;
}
.flex-space-evenly{
    justify-content: space-evenly;
}
.flex-v-align-center{
    align-items: center;
}
.flex-v-align-bottom{
    align-items: flex-end;
}
.flex-v-align-top{
    align-items: flex-start;
}
.flex-h-align-left{
    justify-content: left;
}
.flex-h-align-center{
    justify-content: center;
}

.flex-h-align-right {
    justify-content: right;
}
.flex-column-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.flex-no-wrap  {
    flex-wrap: nowrap;
}
.flex-grow-1 {
    flex-grow: 1;
}
.flex-grow-2 {
    flex-grow: 2;
}
.flex-grow-3 {
    flex-grow: 3;
}
.flex-grow-4 {
    flex-grow: 4;
}
.flex-grow-5 {
    flex-grow: 5;
}
.flex-grow-6 {
    flex-grow: 6;
}

.bg-tulip + .footer,
.bg-emerald + .footer {
    margin-top: 0;
}
.row.bg-emerald {
    background: none;
    position: relative;
}

.row.bg-emerald::after {
   width: 100%;
    position: absolute;
    max-width: 1450px;
    background: #00afb2;
    content: "";
    display: block;
    left: 50%;
    margin-left: -725px;
    top: 0;
    height: 100%;
    z-index: -1;
}
/* PADDING ON THE COLUMNS */

div[class*="col-"] {
    padding: 0px 25px;
    position: relative;
    z-index: 1;
}
.no-padding > div[class*="col-"] {
    padding: 0;
}
.extra-padding div[class*="col-"] {
    padding: 0 40px;
}

.box-shadow {
    box-shadow: 0 5px 10px -5px rgba(0,0,0,0.25);
    background: #FFF;
    overflow: hidden;
}
.border-radius {
    border-radius: 8px;
}
*.padding {
    padding: 25px 30px;
    margin-top: 20px;
}
.text-block.padding,
.sticky .box-shadow.padding {
    margin-top: 0;
}
/* COLUMNS */

.col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
}
.col-2 {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}
.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
.col-45 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
}
.col-5 {
    flex: 0 0 41.66666%;
    max-width: 41.66666%;
}
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}
.col-8 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}
.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}
.col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}
.col-11 {
    flex: 0 0 91.66666%;
    max-width: 91.66666%;
}
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.small-screen-only {
    display: none;
}
.large-screen-only {
    display: block;
}
.pull-right {
    float: right;
}
.sticky {
    position: sticky!important;
    top: 90px;
}


/* EINDE GRID */
/* FORMS */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input {
    font-family: inherit;
    outline: none;
}
input[type="checkbox"] {
    -webkit-appearance: checkbox;
}
input[type="radio"] {
    -webkit-appearance: radio;
}
input[type="submit"], input[type="button"] {
    -webkit-appearance: button;
}
select {
    -webkit-appearance: textfield;
}
.form-group .choice {
    display: block;
}
textarea,
input[type="email"],
input[type="text"],
input[type="number"]{
    width: 100%;
    line-height: 50px;
    padding: 0 10px;
    border: 1px solid #DDD;
    border-radius: 3px;
}
textarea {
    height: 120px;
    line-height: 26px;
}
.reden-retour span {
    width: 100%;
    margin: 0;
    line-height: 35px;
}

.reden-retour span input[type="radio"]{
    vertical-align: middle;
}
.wpcf7 strong {
    font-size: 15px;
    margin-top: 20px!important;
    display: table;
    margin-bottom: 0;
}

.input-group {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    padding: 10px 0;
}
.input-group label {
    padding: 10px 0 0 10px;
}
.input-group input:focus {
    border-color: #00afb2;
}
.input-group input {
    width: 100%;
}

.floating-label label {
    position: absolute;
    z-index: 1;
    left: 11px;
    top: 13px;
    opacity: 0;
    padding: 0;
    font-weight: 400;
    line-height: 12px;
    font-size: 12px;

    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
.floating-label input:not(:placeholder-shown) + label{
    top: 5px;
    opacity: 0.7;
}
.floating-label input:not(:placeholder-shown) {
    padding: 17px 10px 3px 10px;
    line-height: 30px;
}

/* RADIOBUTTONS */

.wpcf7-radio{
    margin: 0 0 20px 0;
    display: inline-block;
}
.wpcf7-radio .wpcf7-list-item-label{
    font-size: 17px;
    padding-left: 20px;
}
.wpcf7-radio .wpcf7-list-item {
    position: relative;
    width: 100%;
    float: left;
    clear: left;
    margin: 0;
}
.wpcf7-radio .wpcf7-list-item label{
    margin-top: 5px;
}

.wpcf7-radio .wpcf7-list-item input[type="radio"]{
    display: none;
}

.wpcf7-radio .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::before {
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 30px;
    background: #FFF;
    left: 0;
    top: 11px;
    position: absolute;
    border: 1px solid #DDD;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin-right: 10px;
}
.wpcf7-radio .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::after {
    width: 10px;
    height: 10px;
    background: #DDD;
    position: absolute;
    display: block;
    left:3px;
    top: 14px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.wpcf7-radio label [type="radio"]:checked + .wpcf7-list-item-label::after {
    background: #00afb2;
}

/* CHECKBOXES */

.check-group {
    margin-top: 20px;
}
.check-group label{
    font-weight: 500;
    position: relative;
    font-size: 16px;
}
.check-group label input[type="checkbox"] {
    display: none;
}

.check-group label [type="checkbox"] + div {
    float: right;
    content: "";
    height: 28px;
    width: 55px;
    border-radius: 30px;
    background: #DDD;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.check-group label [type="checkbox"]:checked + div {
    background: #99cc00;
}
.check-group label [type="checkbox"] + div span {
    width: 22px;
    height: 22px;
    background: #FFF;
    position: absolute;
    display: block;
    left: 3px;
    top: 3px;
    border-radius: 100%;
    box-shadow: 0 1px 1px 0px rgba(0,0,0,0.15);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.check-group label [type="checkbox"]:checked + div span {
    left: 29px;
}

.myndr_dyn_input {
    line-height: 36px;
    font-size: 24px;
    padding: 18px 165px 18px 10px;
    border-radius: 3px;
    position: relative;
}
.myndr_dyn_input[data-placeholder]:empty:after {
    display: block;
    position: absolute;
    content: attr(data-placeholder);
    color: #6a6a6a;
}
.myndr_dyn_input:focus {
    outline: none;
}
.myndr_select_bank{
    padding: 10px;
    color: #202223;
    border: 1px solid silver;
    line-height: 40px;
    font-size: 19px;
    font-weight: 400;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
}


.ccf-form-wrapper .field label.main-label {
    font-weight: 500;
    font-size: initial;
}
.ccf-form-wrapper label {
    font-size: 16px;

}
.ccf-form-wrapper .choice.radio label {
    margin:5px 0 0;
}
.ccf-form-wrapper .choice.radio label input {
    margin: -2px 5px 0 0;
}
.ccf-form-wrapper .btn {
    background: #FFF;
    padding: 0 15px;
    border-radius: 6px;
    line-height: 45px;
    font-size: 18px;
}

/* EINDE FORMS */
/* MAIN MENU */

.logo {
    width: 50px;
    fill: #202223;
    margin: 9px 0;
    float: left;
}
section.main-menu {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    padding: 0 20px 0 0;
    height: 70px;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.15);
}
.main-menu .row {
    position: relative;
    max-width: 100%;
}
.main-menu nav > a,
.main-menu nav > div {
    float: left;
}
.main-menu div {
    padding: 0 10px;
    margin: 0 10px;
    position: relative;
}
.main-menu nav div.menu-hoofdmenu-links-container:after {
    position: absolute;
    width: 1px;
    height: 30px;
    content: "";
    background: #DDD;
    right: 0px;
    top: 20px;
}

.main-menu nav ul,
.main-menu nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}
.menu.account {
    margin-left: auto;
}

.main-menu nav ul:hover li a {
    opacity: 0.5;

    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.blog.single .main-menu nav li.menu-item-2471 a,
.main-menu nav > div > ul > li.current-page-ancestor > a,
.main-menu nav > div > ul > li.current-menu-item > a,
.main-menu nav li.current-menu-parent > a {
    opacity: 1;
}
.main-menu nav ul li:hover a,
.main-menu nav ul li.menu-item-has-children:hover a {
    opacity: 1;
}
.main-menu nav ul li.menu-item-has-children:hover > a {
    line-height: 66px;
}

.main-menu nav li a {
    position: relative;
    font-size: 17px;
    margin: 0 20px;
    line-height: 70px;
    text-transform: lowercase;
    font-weight: 300;
    display: block;
    text-decoration: none;
    opacity: 0.6;
    color: #202223;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.main-menu nav li.menu-item-has-children > a {
    padding-right: 28px;
    background: url('images/angle-down.png') no-repeat right center;
    background-size: 24px;
}

.main-menu nav li ul.sub-menu {
    left: -9999px;
    width: 220px;
    top: 68px;
    border-radius: 6px;
    padding: 0;
    position: absolute;
    background: #FFF;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);
    -webkit-transition: top 0.1s ease-in-out;
    -moz-transition: top 0.1s ease-in-out;
    -ms-transition: top 0.1s ease-in-out;
    -o-transition: top 0.1s ease-in-out;
    transition: top 0.1s ease-in-out;
}
.main-menu nav li ul.sub-menu li {
    width: 100%;
}
.main-menu nav li ul.sub-menu li a{
    line-height: 45px;
    font-size: 15px;
    width: 100%;
    float: left;
    margin: 0;
    padding: 0 20px;
}
.main-menu nav li ul.sub-menu li:last-child a {
    border: 0;
}
.main-menu nav li ul.sub-menu li:hover a{
    background: #F6F6F6;
}
.main-menu nav li:hover ul.sub-menu {
    left: -5px;
    top: 64px;
}
.main-menu nav li ul.sub-menu li.cta a{
    background: #00afb2!important;
    border: 0;
    color: #FFF;
    opacity: 1!important;
}
.main-menu nav li ul.sub-menu li.cta a::after{
    position: absolute;
    right: 5px;
    top: 2px;
    content: "";
    width: 32px;
    height: 32px;
    background-image: url('images/sprite-angle-white.png?_v=3');
    background-repeat:  no-repeat;
    background-position: right -85px;
    background-size: 30px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.main-menu nav li ul.sub-menu li.cta:hover a::after{
    right: 0;
}

.main-menu a.call{
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
    text-decoration: none;
    padding: 0 15px 0 10px;
    padding-left: 33px;
    margin: 22px 0 0;
    background: url('images/sprite_contact.png?_v=3') no-repeat 3px 0px;
    background-size: 30px;
    position: relative;
}
.main-menu a.account::before,
.main-menu a.call::before{
    position: absolute;
    left: -15px;
    height: 100%;
    width: 1px;
    display: block;
    content: "";
    background: #DDD;
}
.main-menu a.account::before {
    left: -6px;
    top: 2px;
}
.main-menu a.account{
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    text-decoration: none;
    width: 30px;
    height: 30px;
    display: block;
    margin: 20px 10px;
    background: url('images/sprite_contact.png?_v=3') no-repeat 3px -30px;
    background-size: 30px;
    position: relative;
}

/* MOBILE MENU */

.mobile-menu .row {
    max-width: 100%;
}

.mobile-menu .logo {
    width: 55px;
    margin: 11px 0 12px 15px;
}

.mobile-menu .cta.bg-emerald {
    position: absolute;
    right: 100px;
    top: 0px;
    box-shadow: none;
}


section.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    background: #FFF;
    border-bottom: 1px solid #DDD;
    z-index: 1000;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
.menu-mobile-menu-container {
    width: 100%;
}
.menu-active  .mobile-menu {
    height: auto;
}
.mobile-menu nav ul,
.mobile-menu nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    width: 100%;
}

.mobile-menu nav li a {
    position: relative;
    font-size: 19px;
    padding: 0 15px;
    line-height: 70px;
    text-transform: lowercase;
    font-weight: 400;
    display: block;
    text-decoration: none;
    color: #202223;
    background: #FFF;
    z-index: 1000;
    border-bottom: 1px solid #DDD;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.mobile-menu nav > div > ul > li:first-child > a {
    border-top: 1px solid #DDD;
}
.mobile-menu nav li.menu-item-has-children > a {
    padding-right: 28px;
    background: url('images/angle-down.png') no-repeat 95% center;
    background-size: 30px;
}

.mobile-menu nav li ul.sub-menu {
    height: 0;
    overflow: hidden;
}
.mobile-menu nav li ul.sub-menu li {
    width: 100%;
}
.mobile-menu nav li ul.sub-menu li a{
    line-height: 60px;
    background: #EFEFEF;
}
.mobile-menu nav li ul.sub-menu li.cta {
    padding: 6px;
}
.mobile-menu nav li ul.sub-menu li.cta a{
    color: #FFF;
    border-radius: 4px;
    background: #00afb2;
}
.mobile-menu nav li ul.sub-menu li {
    width: 100%;
}
.mobile-menu nav li:hover {
    background: #EFEFEF;
}
.mobile-menu nav li:hover ul.sub-menu {
    height: auto;
}

.mobile-menu a.call{
    font-size: 18px;
    font-weight: 400;
    line-height: 60px;
    text-decoration: none;
    padding: 0 20px 0 65px;
    margin: 20px 0 20px 15px;
    background: #00afb2 url('images/sprite_contact.png?_v=3') no-repeat 8px 5px;
    background-size: 50px;
    text-indent: 0;
    border-radius: 6px;
    border: 1px solid #00afb2;

}
.mobile-menu a.account{
    font-size: 18px;
    font-weight: 400;
    line-height: 60px;
    text-decoration: none;
    display: block;
    padding: 0 30px 0 65px;
    margin: 20px 15px 20px 0;
    background: url('images/sprite_contact.png?_v=3') no-repeat 8px -47px;
    background-size: 50px;
    text-indent: 0;
    border-radius: 6px;
    border: 1px solid #DDD;
}

.mobile-menu .cta-mob,
.mobile-menu .bag {
    font-size: 22px;
    font-weight: 400;
    line-height: 62px;
    text-decoration: none;
    display: block;
    padding: 0 30px 0 65px;
    margin: 0px 15px 0 0;
    background: #FFF;
    background-size: 50px;
    position: relative;
    width: 100%;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #DDD;
    margin-left: 15px;
    text-transform: lowercase;
}

.mobile-menu .cta-mob {
    background: #00afb2;
    color: #FFF;
    margin-top: 30px;
    border: 1px solid #00afb2;
}
.mobile-menu .bag.contains-0 {
    display: none;
}
.mobile-menu .items-in-bag {
    padding: 5px 18px 10px 18px;
    height: 35px;
    text-align: center;
    color: #FFF;
    border-radius: 6px;
    line-height: 31px;
    position: absolute;
    right: 20px;
    top: 13px;
    font-size: 18px;
    background: #202223;
    font-weight: 500;
}

.main-menu div.language::before {
    position: absolute;
    left: -10px;
    height: 30px;
    width: 1px;
    display: block;
    content: "";
    background: #DDD;
    top: -3px;
}
.main-menu div.language {
    padding: 0;
    margin: 25px 0 0 10px;
    width: 75px;
    border-radius: 4px;
}
.main-menu div.language a {
    opacity: 0.5;
    width: 33.33333%;
    float: left;
    line-height: 22px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
}
.main-menu div.language a:last-child {
    border: 0;
}
.main-menu div.language.current-de a.de,
.main-menu div.language.current-en a.en,
.main-menu div.language.current-nl a.nl{
    opacity: 1;
}


/* SOCIAL MENU */

ul.socialmenu {
    margin-left: 0;
    padding: 0;
    transform: scale(1.1);
}
.footer ul.socialmenu {
    margin-left: 5px
}
ul.socialmenu a:hover,
ul.socialmenu a {
    padding: 0;
    margin-left: 5px;
}
ul.socialmenu li {
    float: left;
    margin: 0;
}
ul.socialmenu.white a {
    width: 25px;
    height: 25px;
    float: left;
    display: block;
    background-image: url('images/social-sprite.png?_v=3');
    background-size: 200px;
    background-position: 0 0;
    margin-left: 5px;
}
ul.socialmenu.white a.fb {
    background-position: 0 0;
}
ul.socialmenu.white a.fb:hover {
    background-position: -25px 0;
}
ul.socialmenu.white a.ig {
    background-position: -50px 0;
}
ul.socialmenu.white a.ig:hover {
    background-position: -75px 0;
}
ul.socialmenu.white a.tw {
    background-position: -150px 0;
}
ul.socialmenu.white a.tw:hover {
    background-position: -175px 0;
}

ul.socialmenu.white a.li {
    background-position: -100px 0;
}
ul.socialmenu.white a.li:hover {
    background-position: -125px 0;
}
ul.socialmenu a {
    width: 25px;
    height: 25px;
    float: left;
    display: block;
    background-image: url('images/social-sprite.png?_v=3');
    background-size: 200px;
    background-position: 0 0;
    margin-left: 5px;
}
ul.socialmenu.white a.fb {
    background-position: 0 0;
}
ul.socialmenu.white a.fb:hover {
    background-position: -25px 0;
}
ul.socialmenu.white a.ig {
    background-position: -50px 0;
}
ul.socialmenu.white a.ig:hover {
    background-position: -75px 0;
}

ul.socialmenu a.li {
    background-position: -120px 0;
}
ul.socialmenu a.li:hover {
    background-position: -140px 0;
}

ul.socialmenu a.fb {
    background-position: 0 25px;
}
ul.socialmenu a.fb:hover {
    background-position: -25px 25px;
}
ul.socialmenu a.tw {
    background-position: -150px 25px;
}
ul.socialmenu a.tw:hover {
    background-position: -175px 0;
}
ul.socialmenu a.ig {
    background-position: -50px 25px;
}
ul.socialmenu a.ig:hover {
    background-position: -75px 25px;
}

ul.socialmenu a.li {
    background-position: -100px 25px;
}
ul.socialmenu a.li:hover {
    background-position: -125px 25px;
}
/* SHOP */

.main-menu .bag {
    font-size: 13px;
    font-weight: 400;
    line-height: 40px;
    text-decoration: none;
    width: 30px;
    height: 30px;
    display: block;
    margin: 20px 20px 0 0;
    background: url('images/sprite_contact.png?_v=3') no-repeat 3px -60px;
    background-size: 30px;
    position: relative;
}
.main-menu .bag.contains-0 {
    display: none;
}
.main-menu .items-in-bag {
    padding: 4px 8px 5px 8px;
    height: 17px;
    text-align: center;
    color: #FFF;
    border-radius: 13px;
    line-height: 11px;
    position: absolute;
    right: -15px;
    top: -5px;
    font-size: 10px;
    background: #00afb2;
}

/* CSS FOR TOGGLE BUTTON */

.toggle-container {
    display: none;
    width: 80px;
    height: 80px;
    border-left: 1px solid #DDD;
    cursor: pointer;
    padding: 0!important;
    right: 0;
    top: 0;
    margin: 0!important;
    margin-left: 20px!important;
    position: fixed;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.toggle-container .bar{
    width: 25px;
    height: 2px;
    position: absolute;
    background: #202223;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

}
.toggle-container .bar.top-bar{
    top: 32px;
    left: 27px;
}
.toggle-container .bar.middle-bar{
    top: 50%;
    margin-top: -1px /*height of bar / 2*/ ;
    left: 27px;
    width: 14px;
}
.toggle-container .bar.bottom-bar{
    bottom: 32px;
    left: 27px;
}

.menu-active .toggle-container .bar.top-bar{
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 0 0;
}
.menu-active .toggle-container .bar.middle-bar{
    opacity: 0;
}
.menu-active .toggle-container .bar.bottom-bar{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -ms-transform-origin: 0 100%; /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 0 100%; /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.menu-active .toggle-container .bar.top-bar,
.menu-active .toggle-container .bar.bottom-bar {
    width: 21px;
    left: 32px;
}

.menu.main .cta.bg-emerald  {
    margin: 20px 30px 0 -10px;
}


.breadcrumbs {
    margin-top: 20px;
    margin-bottom: 20px;
}
.breadcrumbs span *,
.breadcrumbs span a{
    position: relative;
    text-decoration: none;
    text-transform: lowercase;
}
.breadcrumbs span *,
.breadcrumbs span a span{
    font-size: 13px;
}
.breadcrumbs span a {
    padding: 0 30px 0 0 ;
    opacity: 0.4;
}
.breadcrumbs span a:hover {
    opacity: 1;
}
.breadcrumbs span a::after{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    border-bottom:1px solid #1c1c1c;
    border-left:1px solid #1c1c1c;
    transform: rotate(-135deg);
    top: 50%;
    right: 15px;
    margin-top: -2px;
}
/* EINDE MENU */

/* HEADINGS */

h1 {
    font-weight: 600;
    font-size: 42px;
    line-height: 64px;
    margin-bottom: 15px;
}
h1.page-title,
h1.large {
    font-size: 80px;
    line-height: 85px;
    margin: 40px 0 25px;
}
h1.medium {
    font-size: 64px;
    line-height: 64px;
    margin: 40px 0 15px;
}
.row.first {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px ;
}
.home.school .row.first {
    position: relative;
    margin-top: 90px;
    margin-bottom: 90px ;
}

h1.large::after {
    position:absolute;
}
h1.title {
    font-size: 68px;
    line-height: 86px;
    margin: 40px 0 30px;
}
h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    margin: 30px 0 5px;
}
h3 {
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    margin: 15px 0 10px;
}
.box-shadow.padding > h3 {
    margin:0 0 10px;
}
h4{
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    margin: 20px 0 0;
}

.box-shadow.padding > h4 {
    margin:5px 0 10px;
}
h5{
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    margin: 15px 0 0;
}
.text-center {
    text-align: center;
}
.single .main-text em,
strong em{
    position: relative;
}
strong em,
strong {
    font-weight: 500!important;
    font-family: 'Filson Soft', sans-serif !important;
}


label{
    font-weight: 500;
    font-size: 14px;
    margin-top: 14px;
    display: inline-block;
}
p {
    margin: 0 0 15px;
}
p.inset {
    text-indent: -6px;
}
p.intro {
    font-size: 19px;
    line-height: 32px;
    margin-bottom: 30px;
}
p.intro strong {
    font-weight: 500;
    font-size: 21px;
}
.install-content .page-title,
.content .page-title {
    padding: 30px 0 0;
}

.home .content .page-title {
    padding: 90px 0 30px;
}
.section-title {
    margin: 40px 0 30px;
}
.pre-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: -35px;
}

p.has-small-font-size,
p small a,
p small {
    font-size: 14px;
    line-height: 20px;
}
.text-right,
.text-right p {
    text-align: right;
}
.single .main-text p strong,
.single .main-text strong,
.single .main-text p a,
.single .main-text ol li a,
.single .main-text ul li a,
.single .main-text ol li,
.single .main-text ul li,
.single .main-text p,
.single .main-text em,
div.serif p,
p.serif{
    font-family: 'Frank Ruhl Libre', serif!important;
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
}
.single .main-text p strong,
.single .main-text strong {
    font-weight: 600!important;
}
.single .main-text blockquote p,
blockquote p {
    color:#00afb2!important;
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 26px!important;
    line-height: 36px!important;
    margin: 60px 0;
    padding-left: 20px;
    border-left: 1px solid #00afb2;
    color: #00afb2!important;
}
figcaption {
    font-size: 75%;
    text-align: center;
}
.text-decoration-off a{
    text-decoration: none;
}
.lowercase,
.lowercase * {
    text-transform: lowercase;
}

/* HOMEPAGE */

.first-contact h1{
    font-weight: 600;
    font-size: 96px;
    line-height: 96px;
    margin-bottom: 30px;
    text-transform: lowercase;
}
.first-contact h2{
    font-weight: 500;
    font-size: 26px;
    line-height: 32px;
}
.first-contact h2 strong{
    font-size: 22px;
    font-weight: 500;
    color: #f48e8b;
}

p.abo {
    font-size: 32px;
    margin: 20px 0 0 ;
}
p.pricing {
    font-size: 48px;
    font-weight: 500;
    margin:15px 0 5px;
}
p.freq {
    font-size: 26px;
    margin:0;
}

/* EINDE FONTS */

/* HEADINGS */

.sub h2 {
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    margin: 20px 0 10px;
}
.sub h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    margin:15px 0 5px;
}
.sub h4{
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    margin: 0;
}
.sub h5{
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    margin: 15px 0 5px;
}
.sub .text-center {
    text-align: center;
}
.sub strong {
    font-weight: 500;
}
.sub img {
    max-width: 210px;
    margin: 10px;
}
.sub p {
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
    margin: 0 0 5px;
}
.sub .pricing {text-align: right}
.sub .pricing strong {
    font-size: 18px;
}
.sub p.small {
    font-size: 12px;
}
.sub form {
    max-width: 680px;
    width: 100%;
    margin: 30px auto;
    display: table;
}
.sub hr {
    width: 100%;
    border: 0;
    margin: 10px 0;
    border-top: 1px solid #DDD;

}
.sub .error{
    display: block;
    color: #202223;
    margin: 10px;
    padding: 6px 10px;
    border: 3px solid rgba(244, 143, 139, 1)!important;
    background-color: rgba(244, 143, 139, 0.3);
}
.sub .container {
    width: 100%;
}
.sub .flex {
    display: flex;
    align-items: flex-start;
    width: 100%;
    flex-wrap: nowrap;
}
.sub .row.d-row {
    flex-direction: row;
}
.sub .row.d-column {
    flex-direction: column;
}
.sub .flex.space-between {
    justify-content: space-between;
}
.sub .flex.v-align {
    align-items: center;
}
.sub .no-radio-btn input[type="radio"]{
    display: none;
}
.sub .logo {
    width: 70px;
}
.sub .large-checks{
    cursor: pointer;
}
.sub .large-checks.type label {
    border: 1px solid #DDD;
    padding: 10px 20px 5px 40px;
    position: relative;
    cursor: pointer;
    background:#FFF;
}
.sub .type:last-child label {
    margin-bottom: 30px;
}
.sub .large-checks input:checked + label{
    border: 1px solid #8EC732!important;
}
.sub .d-column .large-checks   input:checked + label{
    background: rgba(142,199,50,0.15);
}
.sub .d-row .type label {
    border: 1px solid #DDD;
    padding: 10px 20px 5px 40px;
    position: relative;
}
.sub .d-row .type:first-child label{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 0;
}
.sub .d-row .type:last-child  label{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.sub .d-column .type:last-child label{
    border-bottom: 1px solid #DDD;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.sub .d-column .type:first-child  label{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.sub .d-column .type:last-child label {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.sub .d-column input:checked + label{
    padding-bottom: 4px;
}
.sub .d-column .type:last-child input:checked + label{
    padding-bottom: 5px;
}

.sub .type label::before {
    position: absolute;
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #DDD;
    left: 10px;
    top: 10px;
    background: #FFF;
    border-radius: 50%;
}
.sub .type input:checked + label::before {
    border: 1px solid #8EC732;
}
.sub .type input:checked + label::after {
    position: absolute;
    display: block;
    content:"";
    width: 8px;
    height: 4px;
    border-left: 2px solid #8EC732;
    border-bottom: 2px solid #8EC732;
    transform: rotate(-45deg);
    left: 15px;
    top: 16px;
}
.sub .fields {
    border: 1px solid #DDD;
    position: relative;
    border-radius: 4px;
    padding: 0 0 15px 0;
    margin-bottom: 30px;
}
.sub .fields > div {
    padding: 5px 0;
    align-items: center;
}
.sub .fields label {
    padding: 5px 0 5px 20px;
    align-items: center;
    font-weight: 400;
}
.sub input[type="email"],
.sub input[type="date"],
.sub input[type="tel"],
.sub input[type="text"] {
    width: 60%;
    line-height: 40px;
    border: 1px solid #DDD;
    padding:  0 5px;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 20px;
}

.sub .normal-radio-btn input[type="radio"] {
    display: none;
}
.sub .normal-radio-btn input[type="radio"] + label {
    position: relative;
    padding: 0;
}
.sub .normal-radio-btn input[type="radio"] + label::before {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    content: "";
    display: block;
    border:1px solid #DDD;
    left: -25px;
    top: 7px;
}
.sub .normal-radio-btn input[type="radio"]:checked + label::before {
    border: 1px solid #8EC732;
}
.sub .normal-radio-btn input[type="radio"]:checked + label::after {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    content: "";
    display: block;
    background: #8EC732;
    left: -23px;
    top: 9px;
}
.sub *:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,175,178,0.15);
}
.sub .accept {
    border: 1px solid #DDD;
    position: relative;
    border-radius: 4px;
    margin-bottom: 60px;
    padding: 10px 0;
}
.sub .accept label {
    padding: 5px 20px 5px 40px!important;
    align-items: center;
    line-height: 23px;
    font-size: 14px;
    position: relative;
    margin: 0;
}
.sub .tag {
    background: #202223;
    color: #FFF;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 20px;
    padding: 0 10px;
    display: block;
    margin: 5px 10px;
    border-radius: 4px;
}
.sub .normal-checkbox input[type="checkbox"] {
    position: absolute;
    left: 10px;
    opacity: 0;
}
.sub .accept input[type="checkbox"] + label::before {
    position: absolute;
    width: 15px;
    height: 15px;
    content: "";
    display: block;
    border:1px solid #BBB;
    left: 12px;
    top: 50%;
    margin-top: -8px;
    border-radius: 2px;
}
.sub .accept input[type="checkbox"]:checked + label::before {
    background: #8EC732;
    border: 1px solid #8EC732;
}
.sub .accept input[type="checkbox"]:checked + label::after {
    position: absolute;
    display: block;
    content:"";
    width: 8px;
    height: 6px;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: rotate(-45deg);
    left: 15px;
    top: 50%;
    margin-top: -4px;
}
.sub .submit,
.sub .accept input[type="submit"] {
    background: #8EC732;
    color: #202223;
    border: 0;
    line-height: 40px;
    padding: 3px 40px 0;
    font-size: 19px;
    font-weight: 400;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
}
.sub .submit {
    margin: 20px 0;
    float: right;
}
.sub input.edit {
    background: none;
    color: #202223;
    border: 1px solid #DDD;
    line-height: 20px;
    padding: 3px 10px 0;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    float: right;
    cursor: pointer;
    text-transform: uppercase;
}
.sub .summary {
    border-radius: 4px;
    border: 1px solid #DDD;
}
.sub .summary td {
    padding: 8px 20px;
    width: 50%;
    font-size: 15px;
    font-weight: 300;
}
.sub .summary tr.line td{
    border-bottom: 1px solid #DDD;
    padding: 10px;
}
.sub .max-width {
    max-width: 680px;
    width: 100%;
    margin: 30px auto;
    display: table;
    text-align: center;
}
.sub .success p {
    font-size: 20px;
    line-height: 28px;
}
.sub .success img {
    margin: 50px 0 0;
}
.sub .success h2 {
    margin: 20px 0 20px;
}
.ui-tabs,
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a,
.ui-tabs .ui-tabs-panel,
.ui-tabs .ui-tabs-nav {
    padding: 0;
    border:0;
    margin: 0;
    top: auto;
}

.page-id-3660 .router-info {
    padding: 30px 25px;
}
div[id*="vraag-"] {
}
div[id*="vraag-"] ul {
    background: #FFF;
    overflow: hidden;
    list-style-type: none;
    display: flex;
    align-items: stretch;
    margin-bottom: 30px!important;
}
div[id*="vraag-"] ul li a{
    line-height: 50px!important;
    width: 100%;
    padding: 0 20px!important;
    display: block;
    border: 1px solid #DDD!important;
    background: #FFF;
    text-align: center;
    margin: 0;
    list-style-type: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    text-transform: lowercase;
    text-decoration: none;
}

div[id*="vraag-"] ul li:last-of-type a{
    border-left: 0!important;
    border-radius: 0;
    border-top-right-radius: 6px!important;;
    border-bottom-right-radius: 6px!important;;
}
div[id*="vraag-"] ul li a.one-btn {
    border-radius: 6px!important;
    border: 1px solid #DDD!important;
}
div[id*="vraag-"] ul li.ui-tabs-active a{
    background: #00afb2!important;
    color: #FFF!important;
    border-color: #00afb2!important;
}
.install h1.pre-title {
    font-size: 22px;
    line-height: 24px;
    margin: 20px 0 0 0;
}
.install p.notification {
    border-radius: 20px;
    line-height: 40px;
    font-size: 13px;
    border: 1px solid #DDD;
    padding: 0 10px 0 20px;
}

.install p.notification strong {
    font-size: 13px;

}
.install .content p {
    font-size: 18px;
}
.install p.install-question {
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
}
.install p.notification .btn{
    margin: 8px 0 0 20px;
    box-shadow: none;
    font-size: 11px;
    line-height: 24px;
}
.wizard .install-content {
    padding-bottom: 0;
}
.router-info {
    padding: 25px!important;
}
/* LAYOUT */

table {
    width: 100%;
}

table thead{
    color: #202223;
    margin: 0;
    background: #FFF;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    box-shadow: 0 2px 0 0 #202223;
    font-weight: 500;
}
table th,
table td {
    text-align: left;
    padding: 5px 15px 5px 0;
}

.sub-footer {
    position: relative;
    padding: 50px 0 30px;
    margin: 0;
}

.footer {
    position: relative;
    padding: 60px 0 30px;
    margin: 90px 0 0;
}

.footer .footer-logo {
    width: 60px;
    margin-left: -5px;
    clear: both;
    fill: #FFF;
}

.sub-footer * ,
.footer * {
    font-size: 14px;
}



/* BLOG */

.blog .wrapper {
    position: relative;
}
.blog .sticked {
    margin-top: 40px;
}
.blog .article {
    position: relative;
}
.blog .grid .article {
    padding-bottom: 40px;
}
.blog .article img {
    position: relative;
    margin: 0;
    height:auto;
}

.blog .article p + a {
    margin-top: -10px;
    position: relative;
}
.blog .article .image {
    position: relative;
    padding: 0;
    margin: 0;
}
.blog .article h5 {
    line-height: 28px;
}

.blog .article h5 {
    line-height: 24px;
}

.single .main-text ol,
.single .main-text ul {
    margin-bottom: 20px;
    margin-left: 10px;
}
.single .main-text em {
    font-style: normal;
    text-indent:15px;
}
.single .main-text pre em,
.single .main-text pre {
    font-style: normal;
    font-size: 22px;
    font-family: 'Frank Ruhl Libre', serif;

}
.single .main-text pre {
}
.single .main-text pre em {
    color: #00afb2;
}
.single .main-text p {
    color: #333!important;
}
.single .main-text p i {
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 23px;
    display: inline-block;
}
.wp-image-3968,
.wp-image-3918 {
    float: left;
    margin: 20px 20px 20px 0px;
    height: auto;
}
.wp-image-3968 {
    width: 200px!important;
}
.wp-image-3917 {
    float: right;
    margin: 20px 0 20px 20px;
    height: auto;
}

.single .avatars,
.single .socials {
    margin: 0 0 40px 0;
}
.avatars.myndr,
.avatar.myndr + .author,
.avatar.myndr {
    display: none;
}

.wp-block-media-text {
    -ms-grid-columns: 30% 70% 1fr;
    grid-template-columns: 30% 70% 1fr;
}
.single figure.wp-block-media-text__media img {
    height: auto;
    margin-bottom: 20px;
}
.single .socials .share-text {
    margin-right: 10px;
    font-size: 13px;
    font-weight: 500;
    text-transform: lowercase;
}
.single .socials a {
    margin: 0 10px 0 0 ;
}
.single .socials .share {
    width: 30px;
    height: 30px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-image: url('images/social-sprite.png?_v=3');
    background-size: 180px;
}
.single .socials .share.tw {
    background-position: -153px 4px;
}
.single .socials .share.fb {
    background-position: -17px 4px;
}
.single .socials .share.li {
    background-position: -109px 4px;
}
.single .socials .share.wa {
    background-position: 4px -43px;
}

.single .main-text ol li,
.single .main-text ul li{
    margin-left: 20px;
    list-style: disc;
}
.single .main-text p strong {
    font-weight: 400;
}
.whole-link{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 50;
    cursor: pointer;
}
.blog .related {
    background: rgba(0,175,178,0.05);
    padding: 40px 0;
    margin: 40px 0 0;
}
.blog .relative {
    position: relative;
}
.blog .image img{
    border-radius: 4px;
}
.blog .article .wrapper{
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.blog .block .image {
    flex: 0 0 200px;
    margin-right: 20px;
}
.blog .block .image img {
    width: 200px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}
.single .related .image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
.blog .article .image{
    width: 100%;
    background-position: center center;
    background-size: cover;
}

.blog .article .text-wrapper{
    width: 100%;
}
.blog .excerpt {
    font-size: 17px;
    line-height: 26px;
    color: #333;
}
.blog .article p.title{
    font-size: 19px;
    line-height: 26px;
    color: #00afb2;
    font-weight: 400;
    margin-top: 10px;
}

.blog .avatar,
.slide-quotes .avatar {
    width: 45px;
    height: 45px;
    position: relative;
    margin-right: 15px;
    border-radius: 50%;
    margin: initial;
    margin-right: 15px;
}
.blog .avatar img,
.slide-quotes .avatar img{
    width: 45px;
    height: 45px;
    border: 3px solid #FFF;
}
.blog .avatar::before,
.slide-quotes .avatar::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    content: "";
    background: url('images/_2020_overlay_avatar.png') no-repeat center center;
    background-size: cover;
    z-index: 100;
    display: block;
}
.date,
.author {
    font-size: 13px;
    margin: 0;
    line-height: 24px;
}
.wp-block-image {
    margin-top: 40px;
    margin-bottom: 40px;
}
.wp-block-image img{
    border-radius: 4px;
    height: auto;
}

.alignfull {
    margin-left: calc( -100vw / 2 + 100% / 2 );
    margin-right: calc( -100vw / 2 + 100% / 2 );
    max-width: 100vw;
}


.aligncenter {
    margin-left: auto;
    margin-right: auto;
}
.aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.size-large.alignwide {
    margin-left:  -120px;
    margin-right:  -120px;
    width: calc(100% + 240px);
    max-width: calc(100% + 240px);
}
.size-large{
    margin: 60px auto;
    width: 100%;
    max-width: 100%;
}

/* BIEB */

.bibliotheek-home .content + .content,
.blog-home .content + .content{
    margin-top: 40px;
}
.blog {
    background: #FFF;
}

.bibliotheek .article .research,
.bibliotheek .article:not(.long-read) a {
    font-size: 14px;
    line-height: 18px;
    color: #999;
}
.bibliotheek .article .research {
    text-align: right;
}
.bibliotheek .genre {
    float: left;
    background: #f48e8b;
    color: #FFF;
    border: 1px solid #f48e8b;
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 5px 1px;
    line-height: 15px;
    margin: 3px 8px 0 0;
    border-radius: 4px;
}
.author-below {
    position: relative;
    margin: 30px 0 30px;
    padding-bottom: 30px !important;
    border-bottom: 1px solid #DDD;
}

.author-below::before {
    top: auto;
    bottom: 0;
}
.navigation .small {
    font-size: 80%;
    font-weight: 500;
}
.previous {
    position: relative;
}

/* EINDE BLOG */


/* BUTTONS */

.wp-block-button__link,
.btn {
    border-radius: 18px;
    padding: 0 20px;
    text-decoration: none;
    display: inline-block;
    line-height: 36px;
    font-size: 14px;
    margin-top: 15px;
    border: 0;
    font-weight: 300;
    cursor: pointer;
    color:#FFF;
    position: relative;
    background-color: #00AFB2;
}

.btn:hover {
    opacity: 0.85;
}
.btn.no-margin {
    margin: 0;
}
.btn.ghost {
    background: none;
    border: 1px solid #1c1c1c;
    color: #1c1c1c;
}
.footer .cta a,
.btn.ghost.white {
    background: none;
    border: 1px solid #FFF;
    color: #FFF;
}

.footer .cta a {
    margin-top: 20px;
}
.btn.ghost.emerald {
    background: none;
    color: #00AFB2;
    border: 1px solid #00AFB2;
}

.btn.ghost.fuchsia {
    background: none;
    color: #D6336C;
    border: 1px solid #D6336C;
}


.btn.xsmall {
    padding: 0 15px;
    border-radius: 4px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
}
.desktop.top-menu .btn.small,
.footer .cta a,
.btn.small {
    padding: 0 15px;
    border-radius: 20px;
    line-height: 24px;
    font-size: 13px;
    font-weight: 400;
    display: table;
}
.wp-block-button__link,
.btn.large {
    padding: 0 25px;
    border-radius: 30px;
    line-height: 45px;
    font-size: 16px;
}
.btn.small.prev {
    padding-left: 30px!important;
}
.btn.prev {
    padding-left: 30px;
    position: relative;
}
.btn.prev::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    border-bottom:1px solid #FFF;
    border-left:1px solid #FFF;
    transform: rotate(45deg);
    top: 50%;
    left: 15px;
    margin-top: -4px;
}
.btn.prev.ghost::before {
    border-bottom:1px solid #1c1c1c;
    border-left:1px solid #1c1c1c;
}
.btn.absolute-right {
    position: absolute;
    right: 0;
    top: 50%;
}
.btn.next {
    padding-right: 30px;
    position: relative;
}
.btn.next::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    border-bottom:1px solid #FFF;
    border-left:1px solid #FFF;
    transform: rotate(-135deg);
    top: 50%;
    right: 15px;
    margin-top: -4px;
}
.btn.download {
    padding-right: 55px;
}
.btn.download::after{
    right: 10px;
    width: 40px;
    height: 40px;
    content: "";
    display: block;
    background-image: url("images/icon_download.svg");
    background-size: 23px;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top:0;
}
.btn.float-right {
    float: right;
}
.card-actions .btn {
    margin: 0;
}

/* EINDE BUTTONS */

/* BACKGROUND STYLES */

.btn .bg-fuchsia,
.bg-fuchsia {
    background-color: #D6336C;
}
.bg-tulip {
    background-color: #f48e8b;
}
.bg-emerald {
    background-color: #00afb2;
}
.bg-raisin {
    background-color: #202223;
}
.bg-colorful{
    background-repeat: no-repeat;
    background-image: url('images/bg_colorful.png');
    background-size: 1000px;
    background-position: right top;
    background-color: #F9F9F9;
}
.bg-yellow {
    background-color: #ffcb00;
}
.bg-danger {
    background-color: #E84343;
}
.bg-success {
    background-color: #00afb2;
}
.bg-white {
    background-color: #FFF;
}
.bg-grey-05 {
    background: rgba(0,0,0,0.05);
}
.bg-grey-10 {
    background: rgba(0,0,0,0.1);
}
.bg-grey-20 {
    background: rgba(0,0,0,0.2);
}
.bg-grey-30 {
    background: rgba(0,0,0,0.3);
}
.bg-grey-40 {
    background: rgba(0,0,0,0.4);
}
.bg-grey-50 {
    background: rgba(0,0,0,0.5);
}
.bg-grey-60 {
    background: rgba(0,0,0,0.6);
}
.bg-grey-70 {
    background: rgba(0,0,0,0.7);
}
.bg-grey-80 {
    background: rgba(0,0,0,0.8);
}
.bg-grey-90 {
    background: rgba(0,0,0,0.9);
}
.bg-none {
    background-color: transparent;
}

/* FONT STYLES */

.font-large {
    font-size: 110%;
    line-height: 150%;
}

.font-small {
    font-size: 85%;
}
.font-smaller {
    font-size: 50%;
}
.font-bold {
    font-weight: 600;
}

.font-fuchsia *,
.font-fuchsia {
    color: #D6336C;
}
.font-emerald *,
.font-emerald {
    color: #00afb2;
}
.font-tulip *,
.font-tulip {
    color: #f48e8b;
}
.font-gold *,
.font-gold {
    color: #ffcb00;
}
.color-white,
.font-white *,
.font-white {
    color: #FFF!important;
}
.font-raisin *,
.font-raisin {
    color: #202223!important;
}
.font-red {
    color: #E84343;
}
.font-grey-10 *,
.font-grey-10 {
    color: rgba(0,0,0,0.1);
}
.font-grey-20 *,
.font-grey-20 {
    color: rgba(0,0,0,0.2);
}
.font-grey-30 *,
.font-grey-30 {
    color: rgba(0,0,0,0.3);
}
.font-grey-40 *,
.font-grey-40 {
    color: rgba(0,0,0,0.4);
}
.font-grey-50 *,
.font-grey-50 {
    color: rgba(0,0,0,0.5);
}
.font-grey-60 *,
.font-grey-60 {
    color: rgba(0,0,0,0.6);
}
.font-grey-70 *,
.font-grey-70 {
    color: rgba(0,0,0,0.7);
}
.font-grey-80 *,
.font-grey-80 {
    color: rgba(0,0,0,0.8);
}
.font-grey-90 *,
.font-grey-90 {
    color: rgba(0,0,0,0.9);
}
/* WIZARD */

.contentpage-wizard {
    margin-bottom: 60px;
}
.page-wizard {
    padding-top: 0;
}

.wizard ul.isps li,
.wizard ul.isps {
    width: 100%;
    float: left;
    margin: 10px 0;
    padding: 0;
    position: relative;
    border-radius: 4px;
    background:none;
}

.wizard ul.isps li {
    background: #FFF;
}
.wizard ul.isps li.ui-state-active,
.wizard ul.routers li.ui-state-active {
    box-shadow:  0 1px 3px 0 rgba(0,0,0,0.25);
}
.wizard ul.isps li{
    width: 16.1%;
    height: 100px;
    background: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
    margin: 0.25%;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.wizard ul.isps li a{
    width: 100%;
    float: left;
    height: 100%;
}
.wizard ul.isps li.kpn{
    background-image: url(images/brands/kpn.jpg);
}
.wizard ul.isps li.ziggo{
    background-image: url(images/brands/ziggo.jpg);
}
.wizard ul.isps li.tele2{
    background-image: url(images/brands/tele2.jpg);
}
.wizard ul.isps li.telfort{
    background-image: url(images/brands/telfort.jpg);
}
.wizard ul.isps li.caiway{
    background-image: url(images/brands/caiway.jpg);
}
.wizard ul.isps li.xs4all{
    background-image: url(images/brands/xs4all.jpg);
}
.wizard ul.isps li.online{
    background-image: url(images/brands/online.jpg);
}
.wizard ul.isps li.nlex{
    background-image: url(images/brands/nlex.jpg);
}

.wizard ul.routers li,
.wizard ul.routers {
    width: 100%;
    float: left;
    margin: 10px 0;
    padding: 0;
    background:#FFF;
}
.wizard ul.routers li{
    width: 24.5%;
    height: 220px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
    margin: 0.25%;
    cursor: pointer;
    position: relative;
    text-align: center;
    background-color: #FFF;
}

.wizard ul.routers li a{
    width: 100%;
    float: left;
    height: 100%;
    text-decoration: none;
    color: #202223;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 50px;
}
.wizard ul.routers li a img{
    width: auto;
    height: auto;
    max-height: 150px;
    max-width: 150px;
}

.wizard ul.routers li a p{
    position: absolute;
    width: 100%;
    bottom: 0;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
}
.router-info {
    margin-top: 30px;
    width: 100%;
}
.router-info p{
    margin-top: 30px;
    width: 100%;
}
.router-info ol,
.router-info ul {
    margin: 20px 0 10px;
    padding: 0;
}
.router-info ol,
.router-info ol li,
.router-info ul,
.router-info ul li {
    margin: 0 0 0 10px;
    padding: 0;
}
.router-info .col-4{
    width: 33.3333%;
    float: left;
    padding: 20px 30px;
    background-color: #FFF;
}
.router-info .col-4 img{
    width: 100%;
    height: auto;
}
.router-info .col-8{
    width: 66.6666%;
    float: left;
}
.router-info blockquote p,
.router-info blockquote p a{
    color: #00afb2;
    font-weight: 500;
}
.scroll-to-routers,
.scroll-to-router-info {
    width: 100%;
    float: left;
    height: 0;
}
ul.router-list {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: 100%;
    float: left;
    margin: 0;
}
ul.router-list > li{
    padding: 5px 10px;
    line-height: 50px;
    height: 50px;
    position: relative;
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    width: 100%;
    float: left;
    margin: 0;
}
.router-list > li.active{
    height: auto;
    background: #F5F5F5;
}
.router-list > li p {
    line-height: 40px;
}
.router-list ol,
.router-list ul{
    margin: 0px 10px 20px 25px ;
}
.router-list ol li,
.router-list ul li{
    position: relative;
    padding-left: 5px;
}
.router-list .closing {
    position: absolute;
    right: 0;
    top: 0;
    margin: 20px;
    color: #202223;
    z-index: 1000;
    cursor: pointer;
    font-weight: 600;
}
/* EINDE WIZARD */

/* NEWSLETTER */

.newsletter {
    background: #373939;
    padding: 10px;
    padding: 20px 30px;
    float: left;
    margin: 60px 0;
    position: relative;
    border-radius: 6px;
    width: 100%;
}
.newsletter::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;

    border-left: 40px solid #373939;
    position: absolute;
    left: 30px;
    bottom: -20px;
    z-index: -1;
    border-radius: 6px;
}
.newsletter p {
    float: left;
    line-height: 30px;
    width: calc(33% - 20px);
    padding: 0;
    margin: 20px 0;
    display: block;
    font-size: 15px;
}
.newsletter p strong,
.newsletter p{
    color: #FFF;
}
.newsletter .button,
.newsletter input{
    float: left;
    color: #FFF;
    border: 0;
    background: none;
    border-bottom: 1px solid #FFF;
    line-height: 40px;
    margin: 15px 10px 10px;
    padding: 0 5px;
    border-radius: 0;
    width: calc(33% - 20px);
    display: block;
}

.newsletter .button {
    background: #f48e8b;
    border: 1px solid #f48e8b;
    color: #202223;
    width: 30%;
    font-weight: 400;
    float: right;
    border-radius: 6px;
    box-shadow:  0 1px 1px 0 rgba(0,0,0,0.25);
    display: block;
}
.newsletter .button:hover{
    background: #f48e8b!important;
    color: #202223!important;
    box-shadow:  0 1px 3px 0 rgba(0,0,0,0.25);
}
/* EINDE NEWSLETTER */

/* PAGINA'S */

.content.text li a,
.content.text a {
    color: #00afb2;
}
.content.team img {
    border-radius: 50%;
    margin-bottom: 30px;
}
.large-six-school {
    fill: rgba(0,175,178,0.15);
    position: absolute;
    z-index: -1;
    top: -150px;
    width:4000px;
    left: 50%;
    margin-left: -2000px;
    transform: rotate(8deg);
}
.thuis .large-six-school {
    margin-left: -2000px ;
    width: 4000px;
    top: -200px;
}
.large-three-school {
    fill: rgba(32,34,36,0.03);
    position: absolute;
    z-index: -1;
    top: -100px;
    width: 1550px;
    left: 50%;
    margin-left: -700px ;
}
.large-six-thuis {
    fill: rgba(0,175,178,0.25);
    position: absolute;
    z-index: -1;
    top: -40px;
    width: 1600px;
    left: 50%;
    margin-left: -1200px ;
}
.large-three-thuis {
    fill: rgba(32,34,36,0.03);
    position: absolute;
    z-index: -1;
    top: -100px;
    width: 1350px;
    left: 50%;
    margin-left: -650px ;
}
ul.with-disc {
    list-style: disc;
    margin-left: 20px!important;
}

/* SCHOOL */

.home.school .image-school {
    position: absolute;
    top: -190px;
    left: 50%;
    z-index: -1;
    width: 950px;
}
.home.school .image-blocked {
    position: absolute;
    top: 30px;
    right: 50%;
    z-index: -1;
    width: 1050px;
}
.home.school img.quote-1 {
    max-width: 380px;
}
.home.thuis .image-thuis{
    position: absolute;
    top: -140px;
    left: 50%;
    z-index: -1;
    width: 950px;
}
.home.thuis .image-switch{
    position: absolute;
    top: -70px;
    left: 50%;
    z-index: -1;
    width: 950px;
}

/* ORDER */

.box .parts,
.choose-color .btn.order-dark,
.choose-color .btn.order-light,
.choose-color .switch{
    display: none;
    margin: 0;
    clear: none;
}

.light-active .box .parts.light,
.light-active .choose-color .btn.order-light,
.light-active .choose-color .switch.light{
    display: inline-block;
}
.dark-active .box .parts.dark,
.dark-active .choose-color .btn.order-dark,
.dark-active .choose-color .switch.dark{
    display: inline-block;

}

.color-picker {
    float: left;
    width: 100%;
    position: relative;
    margin: 0;
    margin-top: 30px;
    list-style: none;
}
ul.color-picker li{
    float: left;
    position: relative;
    margin: 0;
    padding: 60px 35px 10px 45px;
}
.color-picker li::before{
    content: "";
    position: absolute;
    left: 0;
    top:  0px;
    width: 50px;
    height: 50px;
    background: #fdfdfc;
    border-radius: 100%;
    border: 3px solid #faf1e8;
    z-index: 10;
    cursor: pointer;
}
.color-picker li.select-dark::before{
    background: #323233;
    border: 3px solid #a4978e;
}
.dark-active .color-picker li.select-dark::after,
.light-active .color-picker li.select-light::after{
    content: "\f00c";
    position: absolute;
    left: 50%;
    margin-left: -6px;
    top:  -2px;
    width: 27px;
    height: 27px;
    line-height: 23px;
    border-radius: 100%;
    z-index: 11;
    font-size: 16px;
    text-align: center;
    font-family: "FontAwesome";
    color: #FFF;
    background: #00afb2;
    border: 2px solid #FFF;
}
.choice {
    display: none;
    font-size: 15px;
}
.light-active .choice.light,
.dark-active .choice.dark {
    display: block;
}
.landing p.price,
.order p.price {
    float: left;
    width: auto;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
}
.order p.price label {
    float: right;
    width: auto;
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    margin-left: 10px;
}
.order p.price.old-price {
    float: left;
    width: auto;
    font-size: 13px;
    font-weight: 500;
    text-decoration: line-through;
    margin-right: 20px;
    opacity: 0.5;
}
.box ul,
div.usps {
    float: left;
    width: 100%;
    font-size: 16px;
    margin-top: 30px;

}
div.usps {
    display: flex;
    justify-content: center;
    padding-top: 30px;
}
div.usps div  {
    line-height: 30px;
    list-style: none;
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
div.usps img {
    width: 50px;
}
div.usps div + div img {
    margin-right: -15px;
}
div.usps div:last-child img {
    margin-right: 10px;
}
.pre-footer {
    background: #FFF;
    padding: 30px 0;
}
body.order .pre-footer {
    background: #F9F9F9;
}
ul.usps.larger {
    width: auto;
    display: table;
    margin: 30px auto;
    text-align: left;
    float: none;
    font-size: 18px;
}
ul.usps.larger li {
    width: auto;
    position: relative;
    float: left;
    margin-left: 30px;

}

ul.usps.larger img {
    width: 50px;
    left: 0px;
}

ul.usps.larger li + li img {
    left: 20px;
}

ul.usps.larger li + li + li img {
    left:-5px;
}

.content.light img,
.content.dark img{
    margin-top: -30px;
    width: 200px;
}
.switch.dark,
.switch.light {
    float: left;
    width: 100%;
}
.switch img {
    width: 550px;
    clear: both;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.order-shortcut .button + .button,
.page.order .button + .button {
    margin-left: 0px;
}
.order-shortcut .button + .button.white {
    margin-left: 10px;
}
.page.order label.delivery {
    padding: 0 15px;
    background: rgba(61,141,133,0.3);
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 20px 3px 3px 20px;
    padding-top: 3px;
    font-size: 12px;
    padding-left: 30px;
    position: relative;
}
.page.order label.delivery::before {
    content: "";
    position: absolute;
    left: -20px;
    width: 8px;
    height: 8px;
    background: #FFF;
    position: relative;
    z-index: 1;
    display: inline-block;
    border-radius: 100%;
}

.box .with-line {
    border-right: 1px solid #DDD;
}

.box h2 {
    margin-bottom: 20px;
}

.box .parts  {
    float: left;
}

.box .parts li.filter {
    width: 50%;
    padding-top: 0px;
}

.box .button {
    margin-left: 20px;
}
.box.content + .footer,
.related + .footer {
    margin-top: 0;
}

/* MORE INFO */

.more-info {
    padding: 10px 30px 10px;
    background: #F2E1C3;
    box-shadow: 0 1px 1px 0px rgba(0,0,0,0.15);
    border-radius: 10px;
}

.more-info a.call{
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    text-decoration: none;
    padding: 3px 15px 0;
    padding-left: 43px;
    background: url('images/sprite_contact.png?_v=3') no-repeat 3px 3px;
    background-size: 40px;
    background-color: #FFF;
    display: inline-block;
    color: #202223;
    border-radius: 23px;
    margin: 10px 0 30px 0;
}

/* klantenservice */

.page.faq.faq-home .content img,
.page.klantenservice .content img {
    height: 60px;
    margin-top: 40px;
}

.grecaptcha-badge {
    display: none!important;
}

.content.navigation {
    padding: 30px 0 60px;
}

.content.search {
    background: #F3F3F3;
    padding: 0;
    margin-top: 0;
}
.content.search-results {
    padding:  60px 0 0;
}
.content .resultcount {
    padding-top:  40px;
}
.content.search form {
    background: #FFF;
    padding: 10px;
    margin: 60px 0;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    padding: 0;
    box-shadow: 0 1px 1px 0px rgba(0,0,0,0.15);
}

.content.search form input[type="text"]{
    width:100%;
    line-height: 70px;
    font-size: 24px;
    padding: 0 165px 0 10px;
    border: 0;
}
.content.search form input[type="submit"]{
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 40px;
    line-height: 70px;
    background: #00afb2;
    border: 1px solid #00afb2;
    color: #202223;
}

.proberen {
    position: relative;
}
.proberen + .footer {
    margin-top: 0;
}
/* FAQS */

.collapse {
    visibility: hidden;
}
.collapse.show {
    visibility: visible;
    display: block;
    position: relative;
}
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.collapsing.width {
    -webkit-transition-property: width, visibility;
    transition-property: width, visibility;
    width: 0;
    height: auto;
}
.collapse:not(.show) {
    display: none;
}

div[id*="faq-wrapper"]  {
    border-radius: 6px;
    overflow: hidden;
}
div[id*="faq-wrapper"] ul {
    list-style-type: disc;
}
.question {
    border: 0;
    border-top: none;
    padding: 18px 0px 13px 0px;
    border-radius: 0;
    border-bottom: 1px solid #DDD;
    display: table;
    width: 100%;
    position: relative;
}
.question h4 {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    font-size: 18px;
    width: 100%;
    line-height: 22px !important;
    padding-right: 30px;
    position: relative;
    margin-bottom: 0;
}
.question h4::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url('images/sprite-angle.png?_v=3') no-repeat right -85px;
    background-size: 28px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.question:hover h4::after{
    opacity: 1;
    right: -6px;
}
span.term {
    font-size: 10px;
    line-height: 20px!important;
    padding: 0 10px 0 22px;
    border-radius: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    display: inline-block;
    background: rgba(0,175,178,0.2);
    margin-right: 5px;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    margin-bottom: 10px;
}
span.term a {
    line-height: 20px;
    padding: 0;
    margin: 0;
    font-weight: 500;
    text-decoration: none;
}
span.term::before {
    height: 10px;
    width: 10px;
    content: "";
    display: block;
    background: #FFF;
    left: 5px;
    top: 5px;
    position: absolute;
    border-radius: 50%;
}
.long-read  .question h4 {
    padding-left: 40px;
}
.long-read  .question h4::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: url('images/sprite-angle.png?_v=3') no-repeat right -202px;
    background-size: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -20px;
}
.long-read  ul.benefits li {
    padding: 8px 0 8px 40px;
    position: relative;
}
.long-read  ul.benefits li::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: url('images/sprite-angle.png?_v=3') no-repeat right -202px;
    background-size: 40px;
    position: absolute;
    left: 0;
    top: 3px;
}
.question p,
.question p span {
    font-weight: 300!important;
}
.question div + div ul:first-child,
.question div + div ol:first-child,
.question div + div p:first-child {
    padding-top: 20px;
}
.question div + div ul:last-child,
.question div + div ol:last-child,
.question div + div p:last-child {
    padding-bottom: 20px;
}
.call-to-action {
    padding-top: 165px!important;
    padding-bottom: 90px!important;
}
.row.pos_2,
.row.pos_3,
.row.pos_4,
.row.pos_5 {
    padding-top: 60px;
}
.icon-switch {
    width: 100px;
    height: 100px;
    background: url("images/_myndr_switch_sprite.png");
    background-position: 0 0;
    background-size: 500px;
    margin-top: -20px;
}
.pos_2 .icon-switch {
    background-position: -100px 0;
}
.pos_3 .icon-switch {
    background-position: -200px 0;
}
.pos_4 .icon-switch {
    background-position: -300px 0;
}
.pos_5 .icon-switch {
    background-position: -400px 0;
}

.category-list  li {
    text-transform: lowercase;
    font-weight: 500;
    font-size: 13px;
    padding: 0 10px;
    line-height: 26px;
    display: inline-block;
    border: 1px solid #EFEFEF;
    margin-right: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #666;
    letter-spacing: 0.05em;
}
.category-list  li.on {
    background: #00afb2;
    color: #FFF;
}
.pos {font-weight: 500;font-size: 14px; margin-bottom: -20px ;}

.footer .col-3 p:first-child,
.footer .col-2 p:first-child {
    margin-top: 30px;
}

/* EINDE PAGINA'S  */

/* SWITCH */
#explain_switch {
    background-size: cover;
    padding: 0 0;
}
/* DIALS */

.switch-wrapper {
    position: relative;
    width: 400px;
    height: 400px;
    display: block;
    transform: scale(0.9);
    margin: 0 auto;
    z-index: 10;
    float: left;
}
.switch-wrapper:before,
.switch-wrapper:after {
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
    position: absolute;
    color: #f48e8b;
}
.switch-height {
    min-height: 600px;
}
.page404 .the-switch,
.the-switch {
    width: 400px;
    height: 400px;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.pos_1 .the-switch {
    transform: rotate(0deg) scale(0.6);
}
.pos_2 .the-switch {
    transform: rotate(45deg) scale(0.6);
}
.pos_3 .the-switch {
    transform: rotate(90deg) scale(0.6);
}
.pos_4 .the-switch {
    transform: rotate(135deg) scale(0.6);
}
.pos_5 .the-switch {
    transform: rotate(180deg) scale(0.6);
}
.page404 .the-switch img,
.the-switch img {
    width: 100%;
    height: 100%;
    border: 0;
    position: absolute;
    z-index: 5;
}
.page404 .the-switch .dots-container,
.the-switch .dots-container {
    position: absolute;
    width: 24px;
    height: 150px;
    left: 50%;
    margin-left: -12px;
    top: 50%;
    margin-top: -12px;
    z-index: 10;
}
.page404 .the-switch .dots-container .dot,
.the-switch .dots-container .dot {
    width: 18px;
    height: 18px;
    background: #FFF;
    border: 3px solid #1C1C1C;
    border-radius: 100%;
    float: left;
    margin: 3px;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -ms-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}

.pos_1 .dots-container .dot.dot-one, .pos_2 .dots-container .dot.dot-one, .pos_3 .dots-container .dot.dot-one, .pos_4  .dots-container .dot.dot-one, .pos_5 .dots-container .dot.dot-one {
    background: #1C1C1C;
}

.pos_2 .dots-container .dot.dot-two, .pos_3  .dots-container .dot.dot-two, .pos_4 .dots-container .dot.dot-two, .pos_5 .dots-container .dot.dot-two {
    background: #1C1C1C;
}

.pos_3 .dots-container .dot.dot-three, .pos_4 .dots-container .dot.dot-three, .pos_5 .dots-container .dot.dot-three {
    background: #1C1C1C;
}

.pos_4 .dots-container .dot.dot-four, .pos_5 .dots-container .dot.dot-four {
    background: #1C1C1C;
}

.pos_5 .dots-container .dot.dot-five {
    background: #1C1C1C;
}
@keyframes animate-broken {
    0%      {transform: rotate(135deg) scale(0.6)}
    50%     {transform: rotate(135deg) scale(0.6)}
    60%     {transform: rotate(-30deg) scale(0.6)}
    68%    {transform: rotate(25deg) scale(0.6)}
    73%    {transform: rotate(-10deg) scale(0.6)}
    76%    {transform: rotate(3deg) scale(0.6)}
    78%    {transform: rotate(-1deg) scale(0.6)}
    79%    {transform: rotate(0deg) scale(0.6)}
    100%    {transform: rotate(0deg) scale(0.6)}
}


.broken.the-switch {
    margin: 0 auto ;
    animation: animate-broken 2.8s normal forwards ease-in-out;
}

.broken .dots-container .dot.dot-four,
.broken .dots-container .dot.dot-three,
.broken .dots-container .dot.dot-two,
.broken .dots-container .dot.dot-one{
    background: #1C1C1C;
}

.touch {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.touch > div{
    list-style: none;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    cursor: pointer;
    color: #202223;
    transform:  scale(0.8);
    transform-origin: center center;
    background: #FFF;
    z-index: 10;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
    transform-origin: center center;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.pos_1 .touch .touch-one,
.pos_2 .touch .touch-two,
.pos_3 .touch .touch-three,
.pos_4 .touch .touch-four,
.pos_5 .touch .touch-five {
    transform:  scale(0.9);
}
.touch span {
    font-size: 18px;
    line-height: 20px;
    line-height: 60px;
    text-align: center;
    width: 100%;
    float: left;
    color: #202223;
    font-weight: 600;
}

.touch .touch-one {
    left: 50%;
    margin-left: -30px;
    bottom: 20px;
}

.touch .touch-two {
    left: 25%;
    bottom: 25%;
    margin: 0 0 -37px -37px;
}

.touch .touch-three {
    left: 20px;
    top: 50%;
    margin-top: -30px;
}

.touch .touch-four {
    left: 25%;
    top: 25%;
    margin: -37px 0 0 -37px;
}

.touch .touch-five {
    left: 50%;
    margin-left: -30px;
    top: 20px;
}
.touch .line {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    right: -10px;
    top: 7px;
    display: block;
    background: red;
}

ul.positions {
    margin-left: 0;
    min-height: 228px;
}

ul.positions h3 {
    margin: 0 0 5px 0;
}

ul.positions .subtext {
    font-weight: 500;
    font-size: 18px;
}
ul.positions .pos {
    font-weight: 500;
    font-size: 14px;
    margin: 0;
}

ul.positions > li {
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    font-size: 15px;
}
.pos_1 ul.positions .one,
.pos_2 ul.positions .two,
.pos_3 ul.positions .three,
.pos_4 ul.positions .four,
.pos_5 ul.positions .five {
    opacity: 1;
    height: auto;
}

ul.on-off .heading div {
    font-weight: 500;
    float: left;
    font-size: 12px;
}
ul.on-off .heading {
    width: 100%;
    float: left;
}
ul.on-off .heading .on {
    margin-left: 70%;
}
ul.on-off .heading .off {
    float: right;
    margin-right: -22px;
}
ul.on-off,
ul.on-off li {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 30px;
    text-align: left;
    position: relative;
}

ul.on-off li {
    float: left;
    clear: left;
}
ul.on-off.school li.rule-6 {
    margin-bottom: 20px;
}
ul.on-off {
    width: 90%;
    max-width: 400px;
}
ul.on-off .rails{
    width: 25%;
    float: right;
    position: relative;
    height: 30px;
    display: block;
    clear: right;
    background: url('images/track.gif') repeat-x left top;
}
ul.on-off .slider{
    position: absolute;
    fill:#00afb2;
    left: calc(100% + 1px);
    z-index: 2;
    top: 1px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.menu-open ul.on-off .slider{
    z-index: 0;
}
ul.on-off .arrow-left{
    position: absolute;
    left: -20px;
    z-index: 1;
    opacity: 0.2;
    top: 3px;
}
ul.on-off .arrow-right{
    position: absolute;
    right: -20px;
    z-index: 1;
    opacity: 0.2;
    top: 3px;
}

ul.on-off .arrow-right{
    position: absolute;
    right: -20px;
    z-index: 1;
    opacity: 0.2;
    top: 3px;
}

.pos_1 .school .rule-1 .slider,
.pos_1 .school .rule-2 .slider,
.pos_1 .school .rule-3 .slider,
.pos_1 .school .rule-4 .slider,
.pos_1 .school .rule-5 .slider,
.pos_1 .school .rule-6 .slider,
.pos_1 .school .rule-7 .slider,
.pos_1 .school .rule-8 .slider{
    fill: #CCC;
    left: -26px;
}
.pos_2 .school .rule-1 .slider,
.pos_2 .school .rule-2 .slider,
.pos_2 .school .rule-3 .slider,
.pos_2 .school .rule-4 .slider,
.pos_2 .school .rule-5 .slider,
.pos_2 .school .rule-6 .slider{
    fill: #CCC;
    left: -26px;
}
.pos_3 .school .rule-1 .slider,
.pos_3 .school .rule-2 .slider,
.pos_3 .school .rule-3 .slider,
.pos_3 .school .rule-4 .slider{
    fill: #CCC;
    left: -26px;
}
.pos_4 .school .rule-1 .slider,
.pos_4 .school .rule-2 .slider,
.pos_4 .school .rule-3 .slider{
    fill: #CCC;
    left: -26px;
}
.pos_5 .school .rule-1 .slider,
.pos_5 .school .rule-2 .slider{
    fill: #CCC;
    left: -26px;
}

.pos_1 .thuis .rule-1 .slider,
.pos_1 .thuis .rule-2 .slider,
.pos_1 .thuis .rule-3 .slider,
.pos_1 .thuis .rule-4 .slider,
.pos_1 .thuis .rule-5 .slider,
.pos_1 .thuis .rule-6 .slider,
.pos_1 .thuis .rule-7 .slider{
    fill: #F38E8C;
    left: -26px;
}
.pos_2 .thuis .rule-1 .slider,
.pos_2 .thuis .rule-2 .slider,
.pos_2 .thuis .rule-3 .slider,
.pos_2 .thuis .rule-4 .slider,
.pos_2 .thuis .rule-5 .slider{
    fill: #F38E8C;
    left: -26px;
}
.pos_3 .thuis .rule-1 .slider,
.pos_3 .thuis .rule-2 .slider,
.pos_3 .thuis .rule-3 .slider{
    fill: #F38E8C;
    left: -26px;
}
.pos_4 .thuis .rule-1 .slider,
.pos_4 .thuis .rule-2 .slider{
    fill: #F38E8C;
    left: -26px;
}

.home.school #explain_switch {
    padding: 0 0 90px 0;
    margin: 0;
}

.switch_services {
    padding: 10px 15px 3px ;
    border-radius: 4px;
    min-height: 135px;
    position: relative;
    z-index: 1;
    float: right;
    width: 100%;
}
.switch_services.on {
    margin-top: 35px ;
}
.switch_services.off {
    margin-top: 70px ;
}

#explain_switch .container > div {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

#explain_switch .line.on {
    position: absolute;
    display: block;
    width: 200px;
    height: 115px;
    content: "";
    background: url("images/_2020_bg_switch_yes_hor.gif") no-repeat;
    background-size: contain;
    z-index: -1;
    left: 200px;
    top: 80px;
}
#explain_switch .line.off{
    position: absolute;
    display: block;
    width: 200px;
    height: 115px;
    content: "";
    background: url("images/_2020_bg_switch_no_hor.gif") no-repeat;
    background-size: contain;
    z-index: -1;
    left: 200px;
    bottom: 80px;
}
.explain-text{
    position: absolute;
    display: block;
    width: 115px;
    height: 110px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #999;
    text-align: center;
    background: url("images/_2020_bg_switch_text.gif") no-repeat 70px 50px;
    background-size: 25px;
    z-index: -1;
    left: 0px;
    top: 10px;
}

.switch_services {
    width: calc(100% - 400px);
}
.switch_services div {
    line-height: 25px;
    border-radius: 4px;
    background: #DDD;
    font-size: 13px;
    font-weight: 400;
    color: #FFF;
    padding: 0 15px;
    margin: 0 10px 7px 0;
    display: inline-block;
}
.pos_1 .switch_services.off .email,
.pos_1 .switch_services.off .entertainment,
.pos_1 .switch_services.off .saudio,
.pos_1 .switch_services.off .www,
.pos_1 .switch_services.off .gaming,
.pos_1 .switch_services.off .svideo,
.pos_1 .switch_services.off .adult,
.pos_1 .switch_services.off .sm,
.pos_2 .switch_services.off .gaming,
.pos_2 .switch_services.off .entertainment,
.pos_2 .switch_services.off .svideo,
.pos_2 .switch_services.off .adult,
.pos_2 .switch_services.off .sm,
.pos_3 .switch_services.off .adult,
.pos_3 .switch_services.off .sm,
.pos_4 .switch_services.off .adult {
    display: inline-block;
    opacity: 1;
    background: #EB5757;
}
.pos_1 .switch_services.on  .phone,
.pos_2 .switch_services.on .www,
.pos_2 .switch_services.on .email,
.pos_2 .switch_services.on .saudio,
.pos_2 .switch_services.on .phone,
.pos_3 .switch_services.on .www,
.pos_3 .switch_services.on .email,
.pos_3 .switch_services.on .entertainment,
.pos_3 .switch_services.on .svideo,
.pos_3 .switch_services.on .gaming,
.pos_3 .switch_services.on .saudio,
.pos_3 .switch_services.on .phone,
.pos_4 .switch_services.on .www,
.pos_4 .switch_services.on .sm,
.pos_4 .switch_services.on .email,
.pos_4 .switch_services.on .entertainment,
.pos_4 .switch_services.on .svideo,
.pos_4 .switch_services.on .gaming,
.pos_4 .switch_services.on .saudio,
.pos_4 .switch_services.on .phone,
.pos_5 .switch_services.on > div {
    display: inline-block;
    opacity: 1;
    background: #94CE34;
}

/* EINDE SWITCH */

.media.logo_only {
    padding: 60px 0;
}
.media_wrapper {
    position: relative;
    padding-top: 120px;
}
.media_wrapper .media_logo{
    height: 90px;
    width: 100%;
    top: 40px;
    position: absolute;
}
.media.logo_only img{
    height:40px;
    width: auto!important;
    margin: 10px 20px;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.75;
    flex: 0 0 100px;
}
.media.logo_only img:hover{
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}
.media_logo img{
    height: 50px;
    width: auto!important;
}
.media_wrapper h4{
    text-indent: -10px;
}
.media_wrapper p{
    font-size: 13px;
}
.media_logo {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.floater-bottom,
#cookie-melding {
    width: 100%;
    display: none;
    position: fixed;
    flex-wrap: nowrap;
    justify-content: center;
    bottom: 20px;
    z-index: 10000;
}
.floater-bottom {display: flex}
.floater-bottom .bericht,
#cookie-melding .bericht {
    background: rgba(0,0,0,0.8);
    padding: 15px 20px;
    max-width: 550px;
    border-radius: 6px;
    margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.floater-bottom .bericht p,
#cookie-melding .bericht p{
    color: #FFF;
    font-size: 13px;
    line-height: 20px;
    margin:0;
}
#cookie-melding .bericht .dismiss{
    margin-top: 0;
    padding: 0 10px;
    font-size: 13px;
    line-height: 30px;
    margin-left: 20px;
}
#cookie-melding.show {
    display: flex;
}

.landing section.content {
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
}
.landing .slide-section  {
    padding-bottom: 0!important;
}
.landing .slide-section .row {
    position: relative;
    z-index: 1;
}
.landing .slide-section .quote-slider p{
    margin: 0;
}
.landing .slide-section .row .col-4{
    height: 100%;
}
section.white-wave-below,
section.white-wave-top {
    padding-top: 160px;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
}
.landing.school section.white-wave-below,
.landing.school section.white-wave-top {
    padding-top: 200px;
    padding-bottom: 280px ;
}
.landing.school section.white-wave-below + .slide-quotes{
    margin-top: -240px;
}

section.white-wave-below{
    padding-bottom: 160px;
}
section.white-wave-top.less-padding-top {padding-top: 80px;}
.landing .slide-section.white-wave-top  {
    margin-top: -255px;
    padding-top: 0;
}

.landing .first-contact h1 {
    margin-bottom: 20px;
}
.landing .first-contact p.intro {
    margin-top: 40px;
    margin-bottom: 110px;
    font-size: 120%;
}

.landing.long-read .first-contact h1 {
    margin-bottom: 20px;
    font-size: 64px;
    line-height: 64px;
}
.landing.long-read #explain_switch {
    padding: 50px 0;
}
.long-read .info-wrapper.more-padding {
    padding: 30px 50px!important;
    margin-bottom: 40px;
}
.landing.long-read  .first-contact p.intro {
    margin-top: 10px;
    margin-bottom: 150px;
    font-size: 150%;
    line-height: 150%;
}
.bg-hexagon-emerald {
    background: url("images/_2020_bg_hex_emerald.png") no-repeat center center;
    background-size: contain;
    padding: 95px 130px 0 130px!important;
}
.bg-hexagon-gold {
    background: url("images/_2020_bg_hex_gold.png") no-repeat center center;
    background-size: contain;
    padding: 80px 130px 0 130px!important;
}
img.abonneren {
    margin: 0 0 -168px 0px;
    max-width: 350px;
}
.first-contact .bg-hexagon-emerald {
    margin-bottom: -200px;
    height: 400px;
}
.first-contact .bg-hexagon-gold {
    margin-bottom: -250px;
    height: 350px;
}
.bg-homework {
    background: url("images/_2020_homework.jpg") no-repeat center bottom;
    background-size: 1450px;
    height: 100%;
    padding-top: 60px!important;
    padding-bottom: 200px!important;
}
.bg-school {
    background: url("images/_2020_school.jpg") no-repeat center bottom;
    background-size: 1450px;
    height: 100%;
    padding-top: 60px!important;
    padding-bottom: 200px!important;
}
.bg-long-read {
    background: url("images/_2020_gedoe_.jpg") no-repeat center bottom;
    background-size: 1450px;
    height: 100%;
    padding-top: 60px!important;
    padding-bottom: 200px!important;
}
.bg-home {
    background: url("images/_2020_home.jpg") no-repeat center bottom;
    background-size: 1450px;
    height: 100%;
    padding-bottom: 200px!important;
    padding-top: 100px!important;
}
.landing.how .bg-home {
    padding-bottom: 300px;
}
.bg-switch {
    background: url("images/_2020_switch_tulip.jpg") no-repeat center center;
    background-size: 1450px;
    height: 100%;
    padding-bottom: 230px!important;
    padding-top: 200px!important;
}
.white-wave-top-inv::before,
.white-wave-below-inv::after,
.white-wave-top::before,
.white-wave-below::after  {
    position: absolute;
    background: url("images/_2020_white_wave_bottom.png") no-repeat center bottom;
    background-size: 1450px;
    height: 175px;
    width: 100%;
    content: "";
    display: block;
    bottom: -1px;
    left: 0;
}
.white-wave-top::before {
    background: url("images/_2020_white_wave_top.png") no-repeat center top;
    background-size: 1450px;
    top:-1px;
}
.white-wave-top-inv::before {
    background: url("images/_2020_white_wave_top_inv.png") no-repeat center top;
    background-size: 1450px;
    bottom: auto;
    top:-1px;
}
.white-wave-below-inv::after {
    background: url("images/_2020_white_wave_bottom_inv.png") no-repeat center top;
    background-size: 1450px;
    bottom: -4px;
}
.slide-section.white-wave-top::before {
    background: url("images/_2020_white_wave_bottom.png") no-repeat center top;
    background-size: 1450px;
    bottom: auto;
    top:0;
    z-index: 0;
}
.landing.long-read .white-wave-top,
.landing.long-read .white-wave-top-inv {
    padding-top: 240px!important;
}
.landing.long-read .white-wave-below-inv,
.landing.long-read .white-wave-below {
    padding-bottom: 180px!important;
}
.gradient-top::before {
    position: absolute;
    background: url("images/_2020_gradient_white_top.png") repeat-x;
    background-size: contain;
    height:400px;
    width: 100%;
    content: "";
    display: block;
    top: 40px;
    left: 0;
}
.long-read .first-contact.gradient-top::before  {
    top: 60px;
    height: 300px;
}

.how .first-contact.gradient-top::before  {
    top: 0;
}
.landing .notice {
    background: #FFF;
    width: 100%;
    padding: 10px 30px 10px;
    box-shadow: 0 2px 4px 0px rgba(0,0,0,0.15);
    border-radius: 10px;
    margin-top: 20px;
    display: inline-block;
    text-align: center;
    color: #00afb2;
}
.landing .notice code {
    font-size: 20px;
    color: #00afb2;
}
.quote-tile {
    text-align: center;
    padding: 30px 40px 20px;
    background: #FFF;
    box-shadow: 0 2px 4px 0 rgba(30,30,30,0.15);
    border-radius: 4px;
    margin: 30px 0;
}
.quote-tile .quote {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 24px;
}
.quote-tile hr {
    width: 50%;
    margin: 30px auto;
}
.quote-tile .avatar{
    width: 100px;
    height: 100px;
    margin: 0px auto;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 10px;
    overflow: hidden;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -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);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
.slick-dots {
    margin: 20px;
    display: table;
}
.slick-dots li{
    position: relative;
    float: left;
}
.slick-dots button:focus,
.slick-dots button:active,
.slick-dots button:hover,
.slick-dots button{
    text-indent: -9999px;
    background: none!important;
}
button::-moz-focus-inner {
    border: 0;
}
.slick-dots li::after{
    position: absolute;
    left: 0px;
    top: 0px;
    content: "";
    display: block;
    border: 1px solid #FFF;
    width: 20px;
    height: 20px;
    border-radius: 50%;

}
.slick-dots .slick-active::before{
    position: absolute;
    left: 3px;
    top: 3px;
    content: "";
    display: block;
    background: #FFF;
    width: 14px;
    height: 14px;
    border-radius: 50%;

}

.quote-slider .author {
    font-size: 15px;
    margin-top: 20px!important;
}
.quote-slider .avatar {
    float: left;
    clear: left;
    width: 65px;
    height: 65px;
    margin-bottom: 10px;
    border: 1px solid #FFF;
}

.medium {
    max-height: 35px;
}
.slick-arrow:hover,
.slick-arrow {
    position: absolute;
    top: -45px;
    right: 65px;
    text-indent: -9999px;
    background: none!important;
    border: 2px solid #202223;
    border-radius: 50%;
    width: 30px!important;
    height: 30px!important;
    z-index: 100;
    cursor: pointer;
}
.slick-arrow.slick-disabled {
    opacity: 0.5;
    cursor: inherit;
}
.slick-arrow.slick-next {
    right: 25px;
}
.slick-arrow::before {
    position: absolute;
    content: "";
    display: block;
    left: 9px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-left: 2px solid #202223;
    border-top: 2px solid #202223;
    transform: rotate(-45deg);
}
.slick-arrow.slick-next:before  {
    transform: rotate(-225deg);
    left: 6px;
}
/* NOTIFICATIONS */
.services {
    display: block;
    float: none;
    height: 440px;
    width: 90%;
    max-width: 90%;
    float: left;
    overflow-y: hidden;
    margin-top: 40px;
}
.page.why .services {
    margin: 0;
}
.services .service {
    padding: 5px 10px 5px 5px;
}

.services .service {
    padding: 5px 10px 5px 5px;
}

.services .service > div {
    position: relative;
    background: #FFF;
    box-shadow: 0 1px 1px 0px rgba(0,0,0,0.15);
    padding: 15px;
}
.services .service .icon {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    background-image: url('images/sprite-social.png?_v=3');
    background-size: 100px;
    background-position: 0 0;
    line-height: 50px;
    text-align: center;
    float: left;
    margin-right: 15px;
    color: #FFF;
    font-size: 24px;
    margin-top: -2px;
}
.services .service {
    opacity: 0;
}
.services .service .emoticon {
    margin: 0 4px;
    width: 20px;
    margin-top: -4px;
}
.services .service .icon.facebook {
    background-color: #3b5998;
    background-position: -50px -150px;
}
.services .service .icon.whatsapp{
    background-color: #25d366;
    background-position: -49px -50px;
}
.services .service .icon.youtube {
    background-color: #ff0000;
    background-position: -47px -201px;
}
.services .service .icon.snapchat {
    background-color: #fffc00;
    color: #202223;
    background-position: 1px -100px;
}
.services .service .icon.email {
    background-color: #ea4335;
    background-position: -51px 0px;
}
.service span,
.service p {
    margin: 0;
    line-height: 20px;
    font-size: 16px;
}
.service p strong {
    padding-top: 10px;
}
.service span {
    position: absolute;
    right: 15px;
    top:  15px;
    font-size: 14px;
    font-weight: 500;
}
/* SITE WIDE MESSAGE */

body .message {
    display: flex;
}
.message {
    padding: 0!important;
    height: 70px;
    overflow: hidden;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.15);
}
.message p{
    font-size: 14px;
    margin:0;
    line-height: 16px;
    text-align: center!important;
    color: #FFF;
}
.message p strong {
    color: #FFF;
}
.message p.discount {font-size: 16px}

.message p strong::selection,
.message p strong::-moz-selection,
.message p::selection,
.message p::-moz-selection {
    background: rgba(255,255,255,0.55);
    color: #202223;
}

/* EINDE NOTIFICATIONS */

/* RESPONSIVE */

@media (max-width:1400px) {
    .home.school .image-school {
        left: 50%;
        z-index: -1;
        width: 850px;
        top: -50px;
    }
    .home.thuis .image-thuis {
        left: 50%;
        z-index: -1;
        width: 850px;
        top: -50px;
    }
}

@media (max-width: 1200px)  {
    .main-menu nav li a {
        margin: 0 15px;
    }
    a.call {
        display: none;
    }
    .menu.main .cta.bg-emerald {
        margin: 20px 10px 0 -10px;
    }
}

@media (max-width: 1023px)  {

    .container {
        max-width: 860px;
    }
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-45,
    .col-5,
    .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .md-col-12,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .first-contact h1 {
        font-size: 9vw;
        line-height: 100%;
    }
    .main-menu nav li a {
        margin: 0 5px;
        font-size: 15px;
    }
    .bg-hexagon-emerald {
        padding: 95px 60px 0 60px!important;
    }
    .specs div.col-2 {
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }
    .specs div.col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .specs div.col-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
    .specs div.col-8 {
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }
    div[class*="col-"].quote-wrapper {
        background: #f48e8b;
    }
    .slide-section .row.slick-slider{
        margin-bottom: 30px;
    }
    .resellers .sticky {
        height: 50px;
        line-height: 50px;
        padding-top: 50px!important;
        overflow:hidden;
        top: 90px;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 20px;
        border-radius: 8px;
        z-index: 1000;
        background: #FFF;
        margin-bottom: 30px;
    }
    .resellers .sticky::after {
        position: absolute;
        content: "";
        left: 20px;
        width: calc(100% - 40px);
        top: 0;
        height: 50px;
        display: block;
        border: 1px solid #DDD;
        border-radius: 8px;
    }
    .res-menu-active.resellers .sticky::after {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .resellers ul.res-menu {
        width: 100%;
        border: 1px solid #DDD;
        display: block;
        background: #FFF;
        padding-bottom: 15px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .resellers ul.res-menu::before {
        display: block;
        content: "Snel naar...";
        position: absolute;
        left: 40px;
        top: 12px;
    }
    .resellers ul.res-menu::after {
        display: block;
        content: "";
        width: 12px;
        height: 12px;
        border-bottom: 1px solid #1c1c1c;
        border-right: 1px solid #1c1c1c;
        position: absolute;
        right: 40px;
        top: 18px;
        transform: rotate(45deg);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    .resellers ul.res-menu ul.submenu li {
        padding: 0 20px!important;
        line-height: 35px;
        font-size: 16px;
    }
    .res-menu-active.resellers ul.res-menu::after {
        transform: rotate(-135deg);
        top: 24px;
    }
    .resellers ul.res-menu div {
        padding: 10px 20px;
        border: 0;
        margin: 0!important;
    }
    .res-menu-active.resellers .sticky {
        overflow: visible;
        height: auto;
        z-index: 1000;
    }
}
@media (max-width: 768px) {
    body {
        overflow: hidden;
        padding-top: 80px;
        font-size: 18px;
    }
    section.content {
        padding: 0;
    }
    .small-screen-only {
        display: block;
    }

    .large-screen-only {
        display: none;
    }
    .container {
        max-width: 640px;
        padding: 0;
    }
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-45,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    div[class*="col-"] {
        padding: 0 15px;
    }
    .col-5.info-wrapper {
        padding: 30px 15px!important;
        box-shadow: none;
    }
    .home section.content, .home section {
        padding: 30px 0;
    }
    .first-contact h1 {
        text-align: left;
    }
    h1 {
        font-size: 8vw;
        line-height: 100%;
    }
    h2,h3,h4 {
        font-size: 4vw;
    }
    .text-center {
        text-align: left!important;
    }
    .toggle-container {
        display: inline-block;
    }
    a.call {
        display: block;
    }

    .newsletter p {
        width: 100%;
        margin: 0;
        line-height: 45px;
    }
    .newsletter .button,
    .newsletter input {
        width: 100%;
        padding: 0;
        margin: 10px 0 0;
    }

    .home.thuis .image-thuis,
    .home.school .image-school {
        position: relative;
        top: auto;
        left: 50%;
        margin-left: -40%;
        width:700px;
        max-width: 700px;
        height: 700px;
        max-height: 700px;
    }
    .large-three-thuis {
        top: 0px;
        width: 1350px;
        left: 50%;
        margin-left: -450px;
    }
    div.usps div {
        text-align: left;
        justify-content: flex-start;
        padding: 0;
        line-height: 40px;
    }

    div.usps div img {
        margin: 0 10px 0 0!important;
        width: 60px;
    }
    .switch img {margin-top: 30px}

    div.usps {
        flex-direction: column;
    }
    div.usps div {
        text-align: center;
        justify-content: center;
    }

    .footer .row .col-2:first-child {display: none}

    .switch_services {
        width: 100%;
        text-align: center;
    }
    #explain_switch .line.on {
        width: 100px;
        height: 200px;
        background: url("images/_2020_bg_switch_yes.gif") no-repeat;
        background-size: contain;
        left: 50%;
        bottom: 50%;
        top: auto;
    }
    #explain_switch .line.off{
        width: 100px;
        height: 200px;
        background: url("images/_2020_bg_switch_no.gif") no-repeat;
        background-size: contain;
        left: 50%;
        top: 50%;
    }
    .switch_services.on {
        position: absolute;
        top: 0;
        margin:0;
    }
    .switch-wrapper {
        margin: 120px auto 140px;
        float: none;
    }
    .switch_services.off {
        position: absolute;
        bottom: 0;
        top:auto;
        margin:0;
    }

    .explain-text{
        left: 50%;
        width: 170px;
        height: 80px;
        top: 140px;
        margin-left: -190px;
        background-position: 50px 30px;
    }
    .switch_services div {
        margin: 0;
    }

    .message {
        top:80px;
    }

    .message p.discount {
        font-size: 15px
    }

    .media.logo_only img {
        height: 30px;
        margin-left:0;
    }
    .media.logo_only .row .col-12.flex,
    .media.logo_only .row {
        justify-content: flex-start	;
    }

    #cookie-melding .bericht {
        margin-right: 100px;
        display: table;
    }

    #cookie-melding .bericht .dismiss {
        margin: 15px 0 0;
    } .mobile-100vh {
          display: block;
          height: 70vh;
      }
    .bg-switch {
        background: url("images/_2020_switch_tulip_narrow.jpg") no-repeat center top;
        background-size: cover;
        padding-top: 140px!important;
    }

    .bg-home {
        background: url("images/_2020_home.jpg") no-repeat 65% 0;
        background-size: 1000px;
    }
    .bg-homework {
        background: url("images/_2020_homework.jpg") no-repeat 65% 150px;
        background-size: 1600px;
    }
    .bg-hexagon-emerald {
        padding: 95px 60px 0 60px!important;
    }

    .long-read .info-wrapper.more-padding {
        padding: 30px 30px!important;
        margin-bottom: 40px;
        flex: 0 0 90%;
        max-width: 90%;
    }

    .landing.long-read .first-contact h1 {
        margin-bottom: 20px;
        font-size: 42px;
        line-height: 42px;
    }
}
@media (max-width: 576px) {
    .single .related .image img {
        height: 200px;
    }
    .blog .article.sticked h3 {
        margin-top: 0;
    }
    .blog .block {
        margin-bottom: 30px;
    }
    .blog .block h5 {
        margin-top: 0;
    }
    .blog .block .avatar {
        display: none;
    }
    .blog .grid .article {
        margin-bottom: 30px;
    }
    .blog .block .image {
        flex: 0 0 100px;
    }
    .blog .block .image img{
        height: 80px;
    }
    .blog .sticked {
        margin-top: 30px;
    }
    .single .avatars {
        margin-bottom: 20px;
    }
    .content .page-title {
        padding-top: 60px;
    }
    .home .content.first-contact h1 {
        font-size: 14vw;
    }

    h1 {
        font-size: 13vw;
        line-height: 100%;
    }

    h2,h3,h4 {
        font-size: 7vw;
        line-height: 100%;
    }

    .switch-wrapper {
        margin: 70px auto 90px auto;
        transform: scale(0.8) ;
    }
    .switch_services {
        width: 100%;
        margin: 0;
    }
    .switch_services div {
        padding: 0 8px;
    }
    #explain_switch .line.on {
        width: 80px;
        height: 150px;
        background: url("images/_2020_bg_switch_yes.gif") no-repeat;
        background-size: contain;
        left: 55%;
        bottom: 50%;
        margin-bottom: 15px;
        top: auto;
    }
    .explain-text{
        display: none;
    }
    #explain_switch .line.off{
        width: 80px;
        height: 150px;
        background: url("images/_2020_bg_switch_no.gif") no-repeat;
        background-size: contain;
        left: 55%;
        top: 50%;
        margin-top: -10px;
    }
    .bg-homework {
        background: url("images/_2020_homework.jpg") no-repeat 80% 200px;
        background-size: 1600px;
        padding-top: 60px!important;
    }
    .bg-long-read {
        background: url("images/_2020_gedoe_.jpg") no-repeat 10% 350px;
        background-size: 1100px;
        padding-top: 60px!important;
    }
    .landing .bg-hexagon-emerald {
        margin-top: 90px;
    }

    .specs div.col-2 {
        display: none;
    }
    .specs div.col-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .specs div.col-3.force-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .specs div.col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .specs div.col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .mobile-sticky {
        position: sticky;
        display: block;
    }
}