nav.desktop {
	width:100%;
	background-color:var(--red);
	color:var(--white);

	height:100px;
	position:fixed;
	overflow:visible;
	top:0;
	left:0;
	transition:.3s;
	font-size:16px;
	z-index:1000;
}
.scrolling nav.desktop {
	height:70px;
}
	nav.desktop .container {
		height:100%;
	}
	nav.desktop .contents {
		display:flex;
		height:calc(100% - 30px);
		margin:15px 0;
		gap:20px;
		justify-content: space-between;
		align-items:center;
	}
		nav.desktop .logo {
			height:100%;
			width:100%;
			max-width:200px;

		}
			nav.desktop .logo img {
				width:100%;
				height:100%;
				object-fit:contain;
				object-position:center left;

			}
			nav.desktop .button {
				white-space:nowrap;
				bottom:-3px;
				margin-left:10px;
			}
			nav.desktop .topbar {
				list-style-type:none;
				padding-left:0;
				display:flex;
				height:100%;
				align-items:center;
				justify-content: flex-end;
				width:100%;
				gap:35px;
				margin:0;
			}
				nav.desktop .topbar a {
					color:var(--white);
					font-weight:400;
					text-decoration:none;
					position:relative;
					overflow:visible;
					display:block;
					transition:.3s;
				}
					nav.desktop .topbar a:hover,
					nav.desktop .topbar .current_page_ancestor > a,
					nav.desktop .topbar .current_page_item > a {
						color:var(--element_color);
					}
				nav.desktop .topbar a i {
					font-size:24px;
				}

				nav.desktop li:not(.button) {
					padding:20px 0;
					position:relative;
					display:flex;
					justify-content: flex-start;
					z-index:1;
				}

				nav.desktop .sub-menu {
					position:absolute;
					top:calc(50% + 20px);
					background-color:white;
					padding:30px 0px 5px 0px;
					list-style-type:none;
					margin-left:-20px;

					transition:.3s;
					transform:translateY(-20px);
					opacity:0;
					white-space:nowrap;
					pointer-events:none;
					z-index:-1;
				}
				nav.desktop li:hover .sub-menu {
					opacity:1;
					transform:translateY(0);
					pointer-events:auto;
				}
				nav.desktop.scrolling .sub-menu {
					padding-top:20px;
				}
					nav.desktop .sub-menu li {
						padding:10px 20px;
						font-size:16px;
					}




			nav.desktop .burger	{
				height:100%;
				aspect-ratio:1 / 1;
				display:flex;
				align-items:center;
				justify-content:center;
				font-size:26px;
				cursor:pointer;
				transition:.2s;
			}
			nav.desktop .burger:hover {
				color:var(--element_color);
			}


nav.sidebar {
	position:fixed;
	width:100vw;
	height:100vh;
  max-width:500px;
	overflow-y:auto;
	background:var(--sand);
	transform:translateX(50%);
	opacity:0;
	pointer-events:none;
	z-index:1001;
	transition:.5s;
  right:0;
  padding:0px 50px;
	top:0;
}


nav.sidebar.opened {
	transform:translateX(0);
	opacity:1;
	pointer-events:auto;
}
	nav.sidebar .container {
		overflow:visible;
		position:relative;
	}

	nav.sidebar .close {
		width:40px;
		height:40px;
		position:absolute;
		top:35px;
		right:30px;
		color:var(--red);
		line-height:40px;
		text-align:center;
		text-shadow:none;
		opacity:1;
		transition:.2s;
		z-index:10;
	}
	nav.sidebar .close:hover {
		color:var(--orange);
	}

	nav.sidebar ul:not(.sub-menu) {
		list-style-type:none;
		padding-left:0;
		padding-top:100px;
	}
    nav.sidebar ul li {
      overflow:hidden;
      position:relative;
      transition:.3s;
      line-height:60px;
    }

		nav.sidebar ul li:not(:last-of-type) {
			height:auto;

			padding:0px 0px;

		}

		nav.sidebar ul li a {
			color:var(--red);
			font-size:20px;
			padding:10px 0;
			transition:.2s;
		}
    nav.sidebar ul li a:hover,
    nav.sidebar .current_page_ancestor > a,
    nav.sidebar .current_page_item > a {
      color:var(--element_color);
      text-decoration:none;
    }
    nav.sidebar ul li.menu-item-has-children:hover {
      cursor:pointer;
    }

    nav.sidebar ul li.menu-item-has-children > a:after {
      content: " ";
      width: 7px;
      height: 7px;
      border-bottom: 1.5px solid var(--text_color);
      border-right: 1.5px solid var(--text_color);
      display: inline-block;
      transform: rotate(45deg);
      margin: -3px 0px 3px 17px;
      position:absolute;
      top:28px;
      pointer-events:none;

    }
        nav.sidebar ul li.menu-item-has-children:hover > a:after {
          border-color:var(--element_color);
        }
        nav.sidebar ul li.menu-item-has-children a:hover:after {
          border-color:var(--text_color) !important;
        }

    nav.sidebar .menu-item-has-children:not(.opened) .sub-menu li {
      height:0 !important;
      margin-top:-10px;
      transform:translateZ(0);
      overflow:hidden;

    }


    nav.sidebar .sub-menu {
        list-style-type:none;
        position:relative;
        font-size:16px !important;
        padding:0px 0px 10px 30px;
    }
      nav.sidebar .sub-menu li {
        line-height:40px;
      }
			nav.sidebar .sub-menu a {
				font-size:16px;
			}
.afspraak-button .button {
	padding:4px 16px;
}

@media (max-width:1199px) {
	nav.desktop .logo {
		max-width:120px;
	}
}
@media (max-width:991px) {
	nav.desktop .logo {
		max-width:500px;
	}
	nav.desktop .topbar {
		display:none;
	}
}

@media (max-width:767px) {
	nav.desktop .afspraak-button {
		display:none;
	}

	nav.sidebar {
		padding:0px 30px;
	}
}