html body::after{background:rgba(33, 37, 41,.79);content:"";height:100%;opacity:0;pointer-events:none;position:fixed;top:0;left:0;z-index:200;width:100%;display:none;transition:opacity .3s ease;}
html.off-canvas{height:100%;overflow:hidden!important;position:relative;}
html.off-canvas body::after{pointer-events:auto;}
html #theme-page-navigation,html footer,html main{transition:transform .3s ease;}

@media screen and (min-width:768px){
    html body::after{display:block;}
    html.off-canvas #theme-page-navigation,
    html.off-canvas body footer,
    html.off-canvas body main{transform:translateX(15%);}
    html.off-canvas body::after{opacity:1;}
}

nav.off-canvas-nav{position:fixed;top:0;left:-100%;bottom:0;width:100%;z-index:802;transition:left .3s ease;}
nav.off-canvas-nav.active,nav.off-canvas-nav.submenu-active{left:0;}

@media screen and (min-width:768px){
    nav.off-canvas-nav{left:-30%;width:30%;}
}

nav.off-canvas-nav>.close-off-canvas-nav{display:block;top:1.2rem;right:calc(100% - 1.5rem);left:auto;position:absolute;transition:left .3s ease,right .3s ease;transform:translateX(-50%);z-index:10;}
nav.off-canvas-nav.active>.close-off-canvas-nav{display:inline-flex;}

@media screen and (min-width:768px){
    nav.off-canvas-nav>.close-off-canvas-nav{display:none;top:15%;left:100%;right:auto;}
}

nav.off-canvas-nav .menu{background-color:#BDDDE0;overflow-y:auto;height:100%;width:100%;position:absolute;top:0;-ms-overflow-style:none;scrollbar-width:none;transition:left .3s ease;}
nav.off-canvas-nav .submenu,
nav.off-canvas-nav .subsubmenu{background-color:#CBEAED;overflow-y:auto;height:100%;width:100%;position:absolute;top:0;-ms-overflow-style:none;scrollbar-width:none;transition:left .3s ease;}

nav.off-canvas-nav .menu::-webkit-scrollbar,
nav.off-canvas-nav .submenu::-webkit-scrollbar,
nav.off-canvas-nav .subsubmenu::-webkit-scrollbar,
nav.off-canvas-nav .menu ul::-webkit-scrollbar,
nav.off-canvas-nav .submenu ul::-webkit-scrollbar,
nav.off-canvas-nav .subsubmenu ul::-webkit-scrollbar{display:none;}

nav.off-canvas-nav .menu{left:0;z-index:5;}
nav.off-canvas-nav .submenu,
nav.off-canvas-nav .subsubmenu{left:-100%;z-index:2;}

nav.off-canvas-nav.level-2 .submenu,
nav.off-canvas-nav.level-3 .submenu{left:0;width:calc(100% - 3.7rem);}

nav.off-canvas-nav.level-2 .submenu{z-index:3;}
nav.off-canvas-nav.level-3 .submenu{z-index:2;}

nav.off-canvas-nav.level-3 .subsubmenu{left:0;z-index:4;width:calc(100% - 3.7rem);}

@media screen and (min-width:768px){
    nav.off-canvas-nav .submenu,
    nav.off-canvas-nav .subsubmenu{left:0;width:100%;z-index:0;}
	nav.off-canvas-nav.level-2 .menu{box-shadow:2rem 0 3rem rgba(33, 37, 41,.20);}
    nav.off-canvas-nav.level-2 .submenu{left:100%;width:100%;z-index:3;box-shadow:2rem 0 3rem rgba(33, 37, 41,.20);}
    nav.off-canvas-nav.level-2 .subsubmenu{left:0;width:100%;z-index:0;box-shadow:none;}
    nav.off-canvas-nav.level-3 .submenu{left:100%;width:100%;z-index:3;box-shadow:2rem 0 3rem rgba(33, 37, 41,.20);}
    nav.off-canvas-nav.level-3 .subsubmenu{left:200%;width:100%;z-index:2;box-shadow:2rem 0 3rem rgba(33, 37, 41,.75);}
    nav.off-canvas-nav.level-2>.close-off-canvas-nav{left:200%;}
    nav.off-canvas-nav.level-3>.close-off-canvas-nav{left:300%;}
}

@media screen and (max-width:767px){
    nav.off-canvas-nav .menu{background:#871e6f;}
    nav.off-canvas-nav .menu>ul{height:calc(100vh - 25rem);display:flex;align-items:flex-start;flex-direction:column;justify-content:flex-start;row-gap:3rem;position:absolute;bottom:4rem;left:4rem;overflow:auto;scrollbar-width:thin;}
    nav.off-canvas-nav .menu>ul li a{color:#fbfbfb;}
    nav.off-canvas-nav .submenu>ul,
    nav.off-canvas-nav .subsubmenu>ul{display:flex;position:absolute;top:0;height:calc(100% - 2rem);align-items:center;padding-left:3.6rem;}
    nav.off-canvas-nav .submenu>ul ul,
    nav.off-canvas-nav .subsubmenu>ul ul{justify-content:center;}
    nav.off-canvas-nav.submenu-active>.close-off-canvas-nav{right:-1.5rem;}
}

nav.off-canvas-nav .menu>ul,
nav.off-canvas-nav .submenu>ul,
nav.off-canvas-nav .subsubmenu>ul{overflow-y:auto;height:auto;padding:25vh 0 4rem 0;}

@media screen and (min-width:1200px){
    nav.off-canvas-nav .menu>ul,
    nav.off-canvas-nav .submenu>ul,
    nav.off-canvas-nav .subsubmenu>ul{padding:25vh 0 4rem 0;}
}

@media screen and (min-width:1440px){
    nav.off-canvas-nav .menu>ul,
    nav.off-canvas-nav .submenu>ul,
    nav.off-canvas-nav .subsubmenu>ul{padding:25vh 0 4rem 0;}
}

nav.off-canvas-nav .menu ul,
nav.off-canvas-nav .submenu ul,
nav.off-canvas-nav .subsubmenu ul{-ms-overflow-style:none;scrollbar-width:none;}

nav.off-canvas-nav .menu ul li,
nav.off-canvas-nav .submenu ul li,
nav.off-canvas-nav .subsubmenu ul li{list-style-type:none;}

nav.off-canvas-nav .submenu>ul>li,
nav.off-canvas-nav .subsubmenu>ul>li{display:none;}

nav.off-canvas-nav .submenu>ul>li.active,
nav.off-canvas-nav .subsubmenu>ul>li.active{display:block;}

nav.off-canvas-nav .menu ul:not(.link-list)>li>a,
nav.off-canvas-nav .submenu ul:not(.link-list)>li>a,
nav.off-canvas-nav .subsubmenu ul:not(.link-list)>li>a{display:block;}

nav.off-canvas-nav .menu ul li a,
nav.off-canvas-nav .submenu ul li a,
nav.off-canvas-nav .subsubmenu ul li a{text-decoration:none;width:100%;color:#000;padding: .5rem 2.5rem .5rem 3.5rem;}


nav.off-canvas-nav .submenu a.menukop.selected:hover,
nav.off-canvas-nav .submenu a.menukop.selected:focus,
nav.off-canvas-nav .subsubmenu a.menukop.selected:hover,
nav.off-canvas-nav .subsubmenu a.menukop.selected:focus,
nav.off-canvas-nav .link-list .selected a,
nav.off-canvas-nav .link-list li.actief a,
nav.off-canvas-nav a.menukop.selected,
nav.off-canvas-nav .menu-item.actief a,
nav.off-canvas-nav .menu-item.selected a,
nav.off-canvas-nav .menu ul li.menu-item.actief a:hover,
nav.off-canvas-nav .menu ul li.menu-item.actief a:focus,
nav.off-canvas-nav .submenu ul li.actief a:hover,
nav.off-canvas-nav .submenu ul li.actief a:focus,
nav.off-canvas-nav .subsubmenu ul li.actief a:hover,
nav.off-canvas-nav .subsubmenu ul li.actief a:focus{color:#000;background-color: #9EC9CE;}

nav.off-canvas-nav .submenu a.menukop:hover,
nav.off-canvas-nav .submenu a.menukop:focus,
nav.off-canvas-nav .subsubmenu a.menukop:hover,
nav.off-canvas-nav .subsubmenu a.menukop:focus,
nav.off-canvas-nav .menu ul li a:hover,
nav.off-canvas-nav .menu ul li a:focus,
nav.off-canvas-nav .submenu ul li a:hover,
nav.off-canvas-nav .submenu ul li a:focus,
nav.off-canvas-nav .subsubmenu ul li a:hover,
nav.off-canvas-nav .subsubmenu ul li a:focus{color:#000;background-color: #aad6db;}

@media screen and (min-width:768px){
    nav.off-canvas-nav .menu ul li a{font-weight:700;line-height:1.7;padding:.5rem 2.5rem .5rem 3.5rem;}
    nav.off-canvas-nav .submenu ul li a,
    nav.off-canvas-nav .subsubmenu ul li a{font-weight:700;line-height:1.7;}
}

nav.off-canvas-nav .menu ul li a svg,
nav.off-canvas-nav .submenu ul li a svg,
nav.off-canvas-nav .subsubmenu ul li a svg{display:none;}

nav.off-canvas-nav .menu ul>li.menu-item-has-children>a,
nav.off-canvas-nav .submenu ul>li.menu-item-has-children>a,
nav.off-canvas-nav .subsubmenu ul>li.menu-item-has-children>a,
nav.off-canvas-nav .submenu a.menukop,
nav.off-canvas-nav .subsubmenu a.menukop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

nav.off-canvas-nav .menu ul>li.menu-item-has-children>a svg,
nav.off-canvas-nav .submenu ul>li.menu-item-has-children>a svg,
nav.off-canvas-nav .subsubmenu ul>li.menu-item-has-children>a svg,
nav.off-canvas-nav .submenu a.menukop svg,
nav.off-canvas-nav .subsubmenu a.menukop svg{
    display:inline-block;
    flex:0 0 auto;
    margin-left:auto;
    margin-right:0;
    transform:none;
    transition:transform .3s ease-in-out;
}

nav.off-canvas-nav .menu ul>li.menu-item-has-children>a svg rect,
nav.off-canvas-nav .submenu ul>li.menu-item-has-children>a svg rect,
nav.off-canvas-nav .subsubmenu ul>li.menu-item-has-children>a svg rect,
nav.off-canvas-nav .submenu a.menukop svg rect,
nav.off-canvas-nav .subsubmenu a.menukop svg rect{
    fill:currentColor;
    stroke:currentColor;
}

nav.off-canvas-nav .menu ul li a:hover svg,
nav.off-canvas-nav .menu ul li a:focus svg,
nav.off-canvas-nav .submenu ul li a:hover svg,
nav.off-canvas-nav .submenu ul li a:focus svg,
nav.off-canvas-nav .subsubmenu ul li a:hover svg,
nav.off-canvas-nav .subsubmenu ul li a:focus svg{
    transform:none;
}

nav.off-canvas-nav .submenu>ul .menu-heading,
nav.off-canvas-nav .subsubmenu>ul .menu-heading{
    margin-bottom:2rem;
    display:flex;
    align-items:center;
    gap:.8rem;
    font-weight:700;
    color:#000;
    position:relative;
    cursor:pointer;
}

nav.off-canvas-nav .submenu>ul .menu-heading svg,
nav.off-canvas-nav .subsubmenu>ul .menu-heading svg{
    display:inline-block;
    flex:0 0 auto;
}

nav.off-canvas-nav .submenu>ul .menu-heading svg rect,
nav.off-canvas-nav .subsubmenu>ul .menu-heading svg rect{
    fill:currentColor;
    stroke:currentColor;
}

nav.off-canvas-nav .submenu>ul .menu-heading::after,
nav.off-canvas-nav .subsubmenu>ul .menu-heading::after{
    content:"";
    display:block;
    position:absolute;
    bottom:-.2rem;
    width:100%;
    height:.1rem;
    background:#000;
}

@media screen and (min-width:768px){
    nav.off-canvas-nav .submenu>ul .menu-heading,
    nav.off-canvas-nav .subsubmenu>ul .menu-heading{
        margin-bottom:2rem;
        color:#000;
        padding:.5rem 2.5rem .5rem 3.5rem;
    }

    nav.off-canvas-nav .submenu>ul .menu-heading::after,
    nav.off-canvas-nav .subsubmenu>ul .menu-heading::after{
        display:none;
    }
}

/* Nieuwe bovenliggende paginalink onder 'Sluit submenu' */
nav.off-canvas-nav .submenu a.menukop,
nav.off-canvas-nav .subsubmenu a.menukop{
    color:#000;
    font-weight:700;
    margin-bottom:2rem;
    padding:.5rem 2.5rem .5rem 3.5rem;
}

ul.link-list{padding-left:0;/*display:flex;*/align-items:flex-start;flex-wrap:wrap;flex-direction:column;row-gap:1.4rem;}
ul.link-list li{list-style-type:none;padding-left:1.6rem;}

ul.link-list li.menu-item-has-children{
    padding-left:0;
}

ul.link-list li a,
ul.link-list li p{display:inline-block;}

ul.link-list li.menu-item-has-children a{
    display:flex;
}

@media screen and (min-width:768px){
    nav.off-canvas-nav .submenu>ul .link-list{row-gap:0;}
}

ul.link-list li::before{display:none!important;content:none!important}
ul.link-list li{padding-left:0;width:100%}
nav.off-canvas-nav li.menu-item-has-children>a{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
nav.off-canvas-nav li.menu-item-has-children>a::after{
content:"";
width:12px;
height:18px;
flex:0 0 12px;
margin-left:auto;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.232' height='12' viewBox='0 0 12.232 17.629'%3E%3Crect width='12.466' height='4.834' rx='2.417' transform='translate(8.815 12.232) rotate(-135)' fill='%23000000'/%3E%3Crect width='12.466' height='4.834' rx='2.417' transform='translate(12.232 8.815) rotate(135)' fill='%23000000'/%3E%3C/svg%3E") no-repeat center/contain;
}
nav.off-canvas-nav li.menu-item-has-children>a:hover::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.232' height='12' viewBox='0 0 12.232 17.629'%3E%3Crect width='12.466' height='4.834' rx='2.417' transform='translate(8.815 12.232) rotate(-135)' fill='%234C428F'/%3E%3Crect width='12.466' height='4.834' rx='2.417' transform='translate(12.232 8.815) rotate(135)' fill='%234C428F'/%3E%3C/svg%3E") no-repeat center/contain;}

nav.off-canvas-nav a.menukop::after{
display:none!important;
content:none!important;
}
nav.off-canvas-nav .menu-heading{display:flex;align-items:center;gap:.8rem}
nav.off-canvas-nav .menu-heading:hover{text-decoration: underline;}
nav.off-canvas-nav .menu-heading::before{
content:"";
width:12px;
height:18px;
flex:0 0 12px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.232' height='12' viewBox='0 0 12.232 17.629'%3E%3Cg transform='translate(12.232 17.629) rotate(180)'%3E%3Crect width='12.466' height='4.834' rx='2.417' transform='translate(8.815 12.232) rotate(-135)' fill='%23000000'/%3E%3Crect width='12.466' height='4.834' rx='2.417' transform='translate(12.232 8.815) rotate(135)' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

.round-button,
.round-close-button{
    width:5.1rem;
    height:5.1rem;
    min-width:5.1rem;
    min-height:5.1rem;
    background:var(--middenpaars);
    border-radius:6rem;
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .3s ease;
}

.round-button svg rect,
.round-close-button svg rect{fill:#fbfbfb;}

.round-button.big,
.round-close-button.big{width:7.6rem;height:7.6rem;}

.round-button:hover,
.round-close-button:hover{background:#000000;}

main#maincontent .hero{
    padding-top:3.6rem;
    transition:all .3s ease;
    padding-bottom:82px;
}
