/* ************************************************** */
/* navigation: hoofdmenu, slideout, telefoon/whatsapp,  */
/* breadcrumbs                                          */
/* ************************************************** */

/* ************************************************** */
/* main navigation */

.main-navigation{left:0px;position:fixed;right:0px;top:0px}
.main-navigation .is-logo-image{width:240px}
.main-navigation .navigation-branding{margin-left:0 !important}

@media (width < 1024px) {
    .main-navigation .inside-navigation{padding:0 0 0 10px}
}
@media (width >= 1024px) {
    .main-navigation .inside-navigation{padding:0 40px}
}

/* ************************************************** */
/* slideout navigation */

.slideout-navigation .inside-navigation{padding:0 20px !important}
.slideout-navigation .slide-out-nav-logo{height:75px;margin:30px 0;width:75px}
.slideout-navigation ul li a{padding:0 10px !important}
.slideout-navigation .contact{background:var(--accent)}
.slideout-navigation .hook-phone-whatsapp{padding-bottom:60px}

/* ************************************************** */
/* hook phone whatsapp */

.hook-phone-whatsapp{display:flex}
.hook-phone-whatsapp a{background:var(--accent);display:block;height:40px;margin:0 10px 0 0;transition:background-color .5s;width:40px}
.hook-phone-whatsapp a:hover{background:#000}
.hook-phone-whatsapp .telnr a{background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' version='1.1' viewBox='0 0 10.6 10.6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(.334 0 0 .334 -31.22 -27.31)' fill='%23fff'%3E%3Cpath d='m117 101c-0.421-0.211-2.49-1.23-2.87-1.37-0.385-0.14-0.666-0.21-0.947 0.211-0.28 0.421-1.09 1.37-1.33 1.65-0.245 0.281-0.491 0.316-0.911 0.105-0.421-0.211-1.78-0.655-3.38-2.09-1.25-1.12-2.09-2.49-2.34-2.91-0.245-0.421-0.0256-0.649 0.185-0.859 0.189-0.188 0.421-0.491 0.631-0.737 0.211-0.246 0.281-0.421 0.421-0.702s0.0693-0.526-0.0345-0.737c-0.106-0.211-0.946-2.28-1.3-3.12-0.341-0.82-0.688-0.709-0.946-0.722-0.245-0.0129-0.526-0.0155-0.806-0.0155-0.281 0-0.736 0.105-1.12 0.526-0.385 0.421-1.47 1.44-1.47 3.51s1.51 4.07 1.72 4.35c0.21 0.281 2.97 4.53 7.19 6.35 1 0.434 1.79 0.692 2.4 0.886 1.01 0.32 1.93 0.275 2.65 0.167 0.808-0.121 2.49-1.02 2.84-2 0.351-0.983 0.351-1.83 0.245-2-0.106-0.176-0.386-0.281-0.806-0.491' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E")}
.hook-phone-whatsapp .whatsapp a{background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' version='1.1' viewBox='0 0 10.6 10.6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(.286 0 0 .286 -26.1 -22.61)' fill='%23fff'%3E%3Cpath d='m114 99.4c-0.229-0.115-1.36-0.669-1.57-0.746-0.21-0.0766-0.363-0.115-0.516 0.115s-0.592 0.746-0.726 0.899-0.267 0.172-0.497 0.0575c-0.229-0.115-0.968-0.357-1.84-1.14-0.682-0.608-1.14-1.36-1.28-1.59-0.134-0.23-0.0141-0.354 0.101-0.468 0.103-0.103 0.229-0.268 0.344-0.402s0.153-0.23 0.229-0.383c0.0767-0.153 0.0378-0.287-0.0197-0.402-0.0577-0.115-0.516-1.24-0.707-1.7-0.186-0.447-0.375-0.387-0.516-0.394-0.134-0.0056-0.287-0.0084-0.44-0.0084s-0.401 0.0575-0.612 0.287c-0.21 0.23-0.803 0.784-0.803 1.91 0 1.13 0.822 2.22 0.936 2.37 0.115 0.153 1.62 2.47 3.92 3.46 0.547 0.236 0.974 0.377 1.31 0.483 0.549 0.175 1.05 0.15 1.44 0.0907 0.44-0.0659 1.36-0.555 1.55-1.09 0.191-0.536 0.191-0.995 0.134-1.09-0.0577-0.0958-0.21-0.153-0.44-0.268m-4.18 5.71h-0.0113c-1.37-6.5e-4 -2.71-0.368-3.88-1.06l-0.279-0.165-2.89 0.757 0.771-2.81-0.181-0.289c-0.764-1.21-1.17-2.62-1.17-4.06 0.01-4.21 3.42-7.63 7.63-7.63 2.04 6.19e-4 3.95 0.795 5.39 2.24 1.44 1.44 2.23 3.36 2.23 5.4-0.0113 4.21-3.42 7.63-7.63 7.63m6.49-14.1c-1.73-1.73-4.04-2.69-6.49-2.69-5.06 0-9.18 4.12-9.18 9.18 0 1.62 0.422 3.2 1.23 4.59l-1.3 4.76 4.87-1.28c1.34 0.731 2.85 1.12 4.39 1.12h0.0114c5.06 0 9.18-4.12 9.18-9.18 0-2.45-0.953-4.76-2.69-6.49' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E")}

.slideout-navigation .hook-phone-whatsapp{margin-bottom:30px;padding-left:20px}

@media (width < 640px) {
    .main-navigation.has-branding .hook-phone-whatsapp{display:none;visibility:hidden}
}

/* ************************************************** */
/* breadcrumbs */

.nav-breadcrumbs{background:var(--contrast);color:var(--base);font-size:14px !important;line-height:60px !important;overflow:hidden;margin:30px 0 0 0;padding:0 10%;text-overflow:ellipsis;white-space:nowrap;width:100%}
.nav-breadcrumbs a{color:var(--accent)}
.nav-breadcrumbs a:hover{color:var(--base)}

@media (width < 768px) { .nav-breadcrumbs{margin:10px 0 0 0} }
@media (width >= 768px) and (width < 1024px) { .nav-breadcrumbs{margin:15px 0 0 0} }
