@charset "UTF-8";
/*
Theme Name: VZR theme
Theme URI: n/a
Author: GRAFISCH LAB®
Author URI: https://www.grafischlab.com/
Description: VZR custom theme!
Version: 1.0.0
Text Domain: vzr-theme
*/

/*
	Table of content
    1. GENERAL
        1.1 Headings
        1.2 Text
        1.3 Lists
            1.3.1 Checklist
        1.4 Initials
        1.5 Buttons
        1.6 Colors
            1.6.1 Darkblue
            1.6.2 Blue
            1.6.3 Lightgrey
            1.6.4 Yellow
        1.7 Socials
        1.8 Label
        1.9 Table
    2. HEADER
        2.1 Top
            2.1.1 Logo
            2.1.2 Nav
        2.2 Bottom
            2.2.1 Mega menu
    3. MAIN
    4. FOOTER
        4.1 Top
        4.2 Bottom
    RESIZE
*/

/* 1. GENERAL */
:root { 
    --grid-size-xl: ;
    --grid-size-lg: 142rem;
    --grid-size-md: 122rem;
    --grid-size-smd: 100rem;
    --grid-size-sm: 82rem;
    --grid-size-xs: 62rem;
    --grid-padding: 1.2rem;
    --grid-padding-inner: 3rem;
    --box-padding: 3rem;
    --border-radius: 1.2rem;
    --color-lightblue: #F2FCFF;
    --color-blue: #06AEE0;
    --color-darkblue: #001116;
    --color-lightgrey: #F7F5EF;
    --color-grey: #888;
    --color-darkgrey: #464A4B;
    --color-yellow: #FFD800;    
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*:focus {
    outline: none !important;
}

html {
	font-size: 62.5%;
}

body {
    font-family: "Inter", sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;    
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--color-darkgrey);
}

/* 1.1 Headings */
h1,
.faux-h1,
h2,
.faux-h2,
h3,
.faux-h3,
h4,
.faux-h4 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    line-height: 1.3;
    color: var(--color-darkgrey);
}

h1,
.faux-h1 {
    margin-bottom: 2rem;
    font-size: 5.2rem;
    font-weight: 600;
    line-height: 1.2;
}

h2,
.faux-h2 {
    margin-bottom: 1.5rem;
    font-size: 2.8rem;
    font-weight: 700;
}

h3,
.faux-h3 {
    margin-bottom: 1rem;
    font-size: 2.2rem;
    font-weight: 700;
}

h4,
.faux-h4 {
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 600;
}

/* 1.2 Text */
p {
	margin: 0 0 2rem;
}

p:empty {
    display: none;
}

p:last-child {
    margin: 0;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: .3s;
}

a:hover {
    text-decoration: underline;
}

strong {
    color: var(--color-darkgrey);
}

/* 1.3 Lists */
ol {
    margin: 0 0 2rem;
    padding-left: 2rem;
}

main ul {
    list-style-type: none;
    margin: 0 0 2rem;
    padding: 0;
}

main ul li {
    position: relative;
    padding-left: 1.5rem;
}

main ul li::before {
    content: '\2022';
    position: absolute;
    top: -.1rem;
    left: 0rem;
    color: var(--color-blue);
}

p + ul:not(.checklist),
p + ol {
    margin-top: -2rem;
}

/* 1.3.1 Checklist */
ul.checklist li {
    padding-left: 3.5rem;
}

ul.checklist li:not(:first-child) {
    margin-top: 1rem;
}

ul.checklist li::before {
    content: '\f00c';
    position: absolute;
    top: -.5rem;
    left: 0rem;
    font-family: "Font Awesome 6 Pro";
    font-size: 2.4rem;
    color: var(--color-blue);
}

/* 1.4 Initials */
section {
    padding: 0 var(--grid-padding);
}

.row-fw,
.row-xl,
.row-lg,
.row-md,
.row-smd,
.row-sm,
.row-xs {
    width: 100%;
    margin: 0 auto;
}

.row-xl {
    max-width: var(--grid-size-xl);
}

.row-lg {
    max-width: var(--grid-size-lg);
}

.row-md {
    max-width: var(--grid-size-md);
}

.row-smd {
    max-width: var(--grid-size-smd);
}

.row-sm {
    max-width: var(--grid-size-sm);
}

.row-xs {
    max-width: var(--grid-size-xs);
}

.pt-lg {
    padding-top: 8rem;
}

.pt-md {
    padding-top: 4rem;
}

.pt-sm {
    padding-top: 1.2rem;
}

.pt-none {
    padding-top: 0;
}

.pb-lg {
    padding-bottom: 8rem;
}

.pb-md {
    padding-bottom: 4rem;
}

.pb-sm {
    padding-bottom: 1.2rem;
}

.pb-none {
    padding-bottom: 0;
}

.video {
    position: relative;
    width: 100%;
    height: 0;
    margin-bottom: 2rem;
    padding-top: 56.25%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 1.5 Buttons */
.btn {
    position: relative;
	display: inline-flex;
    height: 4.8rem;
    padding: 1rem 5.6rem 1rem 2.5rem;
    border: 0;
    border-radius: 5rem;
    background-color: var(--color-blue);    
    align-items: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.btn.greyed-out {
    background-color: #ccc;
    pointer-events: none;
}

.btn::before {
    content: '\f061';
    position: absolute;
    right: .4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Awesome 6 Pro";
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-darkblue);
    transform: rotate(-45deg);
    transition: .3s;
}

.btn:hover {
    text-decoration: none;
}

.btn:not(.greyed-out):hover::before {
    transform: rotate(0);
}

.link {
    padding-bottom: .2rem;
    border-bottom: .1rem solid var(--color-blue);
    font-size: 1.8rem;
    font-weight: 500;
    text-decoration: none;
}

.link:hover {
    border-color: var(--color-darkblue);
    color: var(--color-darkblue);
    text-decoration: none;
}

/* 1.6 Colors */
.color {
    color: var(--color-blue);
}

/* 1.6.1 Darkblue */
.bgcolor-darkblue {
    background-color: var(--color-darkblue);
    color: white;
}

.bgcolor-darkblue h1,
.bgcolor-darkblue h2,
.bgcolor-darkblue .faux-h2,
.bgcolor-darkblue h3,
.bgcolor-darkblue .faux-h3,
.bgcolor-darkblue strong,
.bgcolor-darkblue a {
    color: white;
}

.bgcolor-darkblue .link {
    border-color: white;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

.bgcolor-darkblue .link:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* 1.6.2 Blue */
.bgcolor-blue {
    background-color: var(--color-blue);
    color: white;
}

.bgcolor-blue h2,
.bgcolor-blue .faux-h2,
.bgcolor-blue h3,
.bgcolor-blue .faux-h3,
.bgcolor-blue strong,
.bgcolor-blue a {
    color: white;
}

.bgcolor-blue ul.checklist li::before {
    color: white;
}

.bgcolor-blue .btn {
    background-color: white;
    color: var(--color-darkblue);
}

.bgcolor-blue .btn::before {
    background-color: var(--color-blue);
}

.bgcolor-blue .link {
    border-color: white;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

.bgcolor-blue .link:hover {
    border-color: var(--color-darkblue);
    color: var(--color-darkblue);
}

/* 1.6.3 Lightgrey */
.bgcolor-lightgrey {
    background-color: var(--color-lightgrey);
}

.bgcolor-lightgrey .link {
    border-color: var(--color-darkblue);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-darkblue);
}

.bgcolor-lightgrey .link:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* 1.6.4 Yellow */
.bgcolor-yellow {
    background-color: var(--color-yellow);
    color: var(--color-darkgrey);
}

.bgcolor-yellow strong,
.bgcolor-yellow a {
    color: var(--color-darkgrey);
}

/* 1.7 Socials */

/* 1.8 Label */
.label {
    padding: .75rem 1rem;
    border-radius: 5rem;
    background-color: white;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-darkblue);
}

/* 1.9 Table */
table {
    width: 100%;
    font-family: "Manrope", sans-serif;
    border-collapse: collapse;
    break-inside: avoid;
    page-break-inside: avoid;
    column-break-inside: avoid;
}

section:not(.dashboard) table th,
section:not(.dashboard) table td {
    border: .1rem solid #E6E6E6;
}

table th {
    padding: 1rem 2rem;
    background-color: var(--color-lightgrey);
    text-align: left;
    vertical-align: top;
}

table td {
    padding: 1rem 2rem;  
}

/* 2. HEADER */
header {
    padding: 0 var(--grid-padding);
}

header.scrolled {
    position: sticky;
    z-index: 20;
    top: 0;
    width: 100%;
    border-bottom: .1rem solid #E6E6E6;
    background-color: white;
    transform: translateY(-100%);
    transition: transform .3s ease;
}

header.scrolled.scroll-animation {
    transform: translateY(0%);
}

header.scrolled.no-animation {
    transition: none;
}

header ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header ul.menu a {
    text-decoration: none;
}

/* 2.1 Top */
header .top {
    padding: var(--grid-padding) var(--grid-padding-inner);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

/* 2.1.1 Logo */
header .top .logo-wrapper {
    display: flex;
    height: 7.2rem;
    width: auto;
}

header.scrolled .top .logo-wrapper {
    height: 6rem;
}

header .top .logo-wrapper img {
    width: auto;
    height: 100%;
}

/* 2.1.2 Nav */
header .nav-wrapper {
    display: flex;
    align-items: center;
    gap: var(--grid-padding);
}

header .top .menu-header-menu-boven-container {
    margin-right: 1.8rem;
}

header.scrolled .top .menu-header-menu-boven-container {
    display: none;
}

header .top ul.menu {
    gap: 3rem;
}

header .top ul.menu a {
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-grey);
}

header .top ul.menu a:hover,
header .top ul.menu > li.current-menu-item > a,
.single-kennisbank header .top ul.menu > li.kennisbank > a,
.single-post header .top ul.menu > li.nieuws > a {
    color: var(--color-blue);
}

header .top ul.sub-menu {
    display: none;
}

header .search-btn,
header .login-out-btn {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 5rem;
    background-color: var(--color-lightblue);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-blue);
    cursor: pointer;
    transition: .3s;
}

header .search-btn:hover,
header .login-out-btn:hover {
    background-color: var(--color-blue);
    color: white;
    text-decoration: none;
}

header.scrolled .btn {
    display: none;
}

header .hamburger {
    margin-left: var(--grid-padding);
    display: none;
    cursor: pointer;
}

header.scrolled .hamburger {    
    display: flex;
}

/* 2.2 Bottom */
header .bottom {
    position: relative; 
    padding: 0 var(--grid-padding-inner);  
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background-color: var(--color-blue);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.4rem;
    line-height: 1.3;
}

header.scrolled .bottom {
    display: none;
}

header .bottom ul.menu > li {
    height: 4.8rem;
    display: flex;
    align-items: center;
}

header .bottom ul.menu > li > a {
    height: 100%;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    color: white;
    white-space: nowrap;
}

header .bottom ul.menu > li.menu-item-has-children:hover > a,
header .bottom ul.menu > li > a:hover {
    color: var(--color-darkgrey);
}

header .bottom ul.menu > li.menu-item-has-children > a::after {
    content: '\f107';
    margin-left: .5rem;
    font-family: "Font Awesome 6 Pro";
}

/* 2.2.1 Mega menu */
header .mega-menu-wrapper {
    position: absolute;
    z-index: 1;
    top: 4.8rem;
    left: 0;
    width: 100%;
    padding: var(--box-padding) var(--box-padding) calc(var(--box-padding) * 1.5);
    border-radius: var(--border-radius);
    background-color: rgba(255,255,255,.98);
    display: none;
}

header .mega-menu-wrapper .faux-h3 {
    position: relative;
    margin: 0;
    padding: 0 0 1rem 1.5rem;
    border-bottom: .1rem solid #E6E6E6;
}

header .mega-menu-wrapper .inner-container {
    position: relative;
    top: 1rem;
}

header .bottom ul.sub-menu {
    list-style-type: none;
    width: 25rem;
    margin: 0;
    padding: 0;
    transition: .3s;
}

header .bottom ul.sub-menu a {
    display: inline-block;
    position: relative;
    width: calc(100% - 1.5rem);
    padding: .75rem 3rem .75rem 1.5rem;
    border-radius: 5rem;
    color: var(--color-grey);
}

header .bottom ul.sub-menu a:hover {
    background-color: var(--color-lightblue);
    color: var(--color-blue);
}

header .bottom ul.sub-menu > li.menu-item-has-children > a::before {
    content: '\f105';
    position: absolute;
    right: 1.5rem;
    font-family: "Font Awesome 6 Pro";
    color: var(--color-blue);
}

header .bottom ul.sub-menu > li > ul.sub-menu {
    position: absolute;
    top: 0;
    left: 25rem;
    height: 100%;
    display: none;
}

header .bottom ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    display: none;
}

header .bottom ul.sub-menu li.menu-item-has-children.is-open > ul.sub-menu {
    display: block;
}

header .bottom ul.sub-menu li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block;
}

header .bottom ul.sub-menu li.menu-item-has-children.is-open > a { /* Highlight parent */
    background-color: var(--color-blue);
    color: white;
}

header .bottom ul.sub-menu li.menu-item-has-children.is-open > a::before { /* Highlight parent */
    color: white;
}

/* 3. MAIN */
main {
    padding-top: var(--grid-padding);
}

/* 4. FOOTER */
footer {
    padding: var(--grid-padding);
    font-size: 1.5rem;
    line-height: 2.2;
}

footer h2,
footer h3,
footer h4 {
    color: white;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer .container {
    padding: var(--box-padding) var(--box-padding) 2rem;
    border-radius: var(--border-radius);
}

/* 4.1 Top */
footer .top {
    padding-bottom: 4.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 3rem;
    font-weight: 500;
}

footer .top .col:not(:first-child) a {
    color: var(--color-blue);
}

/* 4.2 Bottom */
footer .bottom {
    position: relative;
    padding-top: 2rem;
    border-top: .1rem solid #464A4B;
    color: var(--color-grey);
}

footer .bottom a {
    color: var(--color-grey);
}

footer .bottom p {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

/* RESIZE */
@media (max-width: 1444px) {
}

@media (max-width: 1240px) {
    /* 2. HEADER */
    /* 2.1 Top */
    /* 2.1.2 Nav */
    header .top .menu-header-menu-boven-container {
        display: none;
    }

    header .hamburger {
        margin-left: var(--grid-padding);
        display: flex;
    }

    /* 4. FOOTER */
    /* 4.1 Top */
    footer .top {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: var(--box-padding) calc(var(--grid-padding) + calc(var(--box-padding) * 2));
    }
}

@media (max-width: 1024px) {
    /* 1. GENERAL */
    :root {
        --grid-padding-inner: 1.5rem;
        --box-padding: 2.5rem;
    }

    /* 1.9 Table */
    table th {
        padding: 1rem;
    }

    table td {
        padding: 1rem;  
    }

    /* 2. HEADER */
    header {
        border-bottom: .1rem solid #E6E6E6;
    }

    /* 2.1 Top */
    /* 2.1.1 Logo */
    header .top .logo-wrapper {
        height: 6rem;
    }

    /* 2.1.2 Nav */
    header form,
    header .btn {
        display: none;
    }

    /* 2.2 Bottom */
    header .bottom {
        display: none;
    }
}

@media (max-width: 899px) {
    /* 1. GENERAL */
    body {
        font-size: 1.6rem;
    }

    /* 1.1 Headings */
    h1,
    .faux-h1 {
        font-size: 4rem;
    }

    h2,
    .faux-h2 {
        font-size: 2.3rem;
    }

    h3,
    .faux-h3 {
        font-size: 2.3rem;
    }

    h4,
    .faux-h4 {
        font-size: 1.8rem;
    }

    /* 1.5 Buttons */
    .link {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    /* 1. GENERAL */
    :root {
        --grid-padding: .9rem;
        --grid-padding-inner: 1.3rem;
    }

    /* 1.1 Headings */
    h1,
    .faux-h1 {
        margin-bottom: 1.5rem;
        font-size: 3rem;
        font-weight: 700;
    }

    /* 1.4 Initials */
    .pt-lg {
        padding-top: 6rem;
    }

    .pt-md {
        padding-top: 3rem;
    }

    .pt-sm {
        padding-top: .9rem;
    }

    .pb-lg {
        padding-bottom: 6rem;
    }

    .pb-md {
        padding-bottom: 3rem;
    }

    .pb-sm {
        padding-bottom: .9rem;
    }
}

@media (max-width: 599px) {
    /* 4. FOOTER */
    footer {
        line-height: 2;
    }

    /* 4.1 Top */
    footer .top {
        padding: 0;
        grid-template-columns: 1fr;
        grid-gap: 0;
        font-weight: 500;
    }

    footer .top .col {
        padding: 1.2rem 0;
    }

    footer .top .col:not(:first-child) {
        border-top: .1rem solid #464A4B;
    }

    footer .top h4 {
        position: relative;
        margin: 0;
        transition: .3s;
    }

    footer .top .col.active h4 {
        margin-bottom: 1rem;
        color: var(--color-blue);
    }

    footer .top h4::before {
        content: '\2b';
        position: absolute;
        top: .3rem;
        right: 0;
        font-family: "Font Awesome 6 Pro";
        font-size: 1.6rem;
        color: white;
    }

    footer .top .col.active h4::before {
        content: '\f068';
        color: var(--color-blue);
    }

    footer .top .text {
        padding-bottom: 1rem;
        display: none;
    }

    /* 4.2 Bottom */
    footer .bottom {
        padding-top: 3rem;
    }

    footer .bottom p {
        display: block;
    }
}

@media (max-width: 499px) {
    /* 2. HEADER */
    /* 2.1 Top */
    /* 2.1.2 Nav */
    header .search-btn,
    header .login-out-btn {
        display: none;
    }
}

/* FONT FACE */
@font-face {
    font-family: 'Kenteken';
    src: url('assets/fonts/Kenteken/Kenteken.eot');
    src: url('assets/fonts/Kenteken/Kenteken.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Kenteken/Kenteken.woff2') format('woff2'),
        url('assets/fonts/Kenteken/Kenteken.woff') format('woff'),
        url('assets/fonts/Kenteken/Kenteken.ttf') format('truetype'),
        url('assets/fonts/Kenteken/Kenteken.svg#Kenteken') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}