/*background-color menu*/
#site-header.header-footer-group {
	background-color: var(--white);
}
.header-toggles{
	display: none;
}
.header_contact, .header_menu {
	position: fixed !important;
	width: 100% !important;
	z-index: 5;
}
.header_contact .header-inner {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 5rem !important;
	padding-right: 5rem !important;
	font-size: 1.1rem;
}
@media (min-width: 600px) and (max-width: 782px) {
	.header_contact .header-inner {
		font-size: 1.2rem;
	}
}
@media (min-width: 783px) and (max-width: 1000px) {
	.header_contact .header-inner {
		font-size: 1.3rem;
	}
}
@media (min-width: 1000px) {
	.header_contact .header-inner {
		font-size: 1.4rem;
	}
}
@media (min-width: 1300px) {
	.header_contact .header-inner {
		font-size: 1.5rem;
	}
}
@media (min-width: 1500px) {
	.header_contact .header-inner {
		font-size: 1.6rem;
	}
}
main {
	margin-top: 0px;
}
.header_contact {
	top: -2px;
}
.header_menu {
	top: 36px;
}
.menu-item {
	cursor: pointer;
}
@media (max-width: 1000px) {
	main {
		margin-top: 0px;
	}
	.header_contact {
		top: -2px;
	}
	.header_menu {
		top: 51px;
	}
}
@media (max-width: 599px) {
	main {
		margin-top: 0px;
	}
	.header_contact {
		top: -2px;
	}
	.header_menu {
		top: 49px;
	}
}

.menu-modal .mobile-menu a {
	color: var(--white);
}
/* links menubar*/
#site-header li.menu-item {
	color: var(--antracite);
	padding: 12px 11px;
	margin: 0;
	margin-left: 0.2rem;
}
#site-header li.menu-item > a {
	color: inherit;
}
#site-header li .icon {
	right: 0.5rem;
	top: calc(50% - 0.7rem);
	color: var(--antracite);
}
#site-header li.current-menu-item {
	background-color: var(--antracite);
	color: var(--white);
}
#site-header li.current-menu-item .icon {
	color: var(--white);
}
#site-header li.current-menu-item > a {
	text-decoration: none;
	display: block;
	color: var(--white);
}
#site-header li.menu-item-has-children > a {
	padding-right: 1.6rem;
	padding-top: 0px;
	padding-bottom: 0px;
}
#site-header li.menu-item .icon {
	color: inherit;
}
#site-header li.menu-item:hover {
	background-color: var(--antracite);
	color: var(--white);
}
#site-header a:hover, #site-header a:focus {
	text-decoration: none;
}
#site-header ul.sub-menu {
	background-color: var(--antracite);
}
#site-header ul.sub-menu a {
	color: inherit;
	background-color: transparent;
	padding: 0;
}
#site-header ul.sub-menu a:hover {
	color: inherit;
}
#site-header ul.sub-menu li.menu-item {
	margin: 0;
	color: var(--white);
	background-color: var(--antracite);
}

#site-header ul.sub-menu li.menu-item:first-child {
	color: var(--antracite);
	background-color: var(--light-grey);
	border-bottom: 2px solid var(--white);
}
#site-header .menu-item-912 ul.sub-menu li.menu-item:first-child {
	color: var(--white);
	background-color: inherit;
	border-bottom: inherit;
}
#site-header .menu-item-912 ul.sub-menu li.menu-item:first-child:hover {
	color: var(--antracite);
	background-color: var(--white);
}
#site-header ul.sub-menu li.menu-item:hover {
	color: var(--antracite);
	background-color: var(--white);
}
#site-header ul.sub-menu a:hover, #site-header ul.sub-menu a:focus {
	text-decoration: none;
}
#site-header .current_page_ancestor {
	text-decoration: none;
	color: var(--white) !important;
	background-color: var(--antracite);
}
#site-header .primary-menu ul.sub-menu {
	padding: 0;
}
.footer-menu .menu-item a {
	color: var(--white) !important;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 0px; /* Add a top margin */
	margin-bottom: 0px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
	background-color: var(--white);
	color: var(--antracite);
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 20px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}
.sidenav_background{
	background-color: #00000077;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 4;
}
.sidenav_background.modal-open {
	display: block;
	width: 100%;
	height: 100%;
}
/* The side navigation menu */
.sidenav {
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 5; /* Stay on top */
	top: 0; /* Stay at the top */
	right: 0;
	background-color: var(--antracite);
	overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: auto;
	padding-top: 60px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	max-width: 50%;
	box-shadow: 15px 3px 45px #000;
	color: var(--white);
	font-size: var(--font-size5);
}

@media (max-width: 1000px) {
	.sidenav {
		max-width: 66%;
	}
}
@media (max-width: 599px) {
	.sidenav {
		max-width: 100%;
	}
}

/* The navigation menu links */
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: var(--white);
	display: block;
	transition: 0.3s;
}
.sidenav h5 {
	margin: 0;
}
.sidenav button:hover, .sidenav button:focus {
	text-decoration: none;
	background-color: var(--light-grey);
	color: var(--antracite);
}
.sidenav button.menu_active {
	background-color: var(--light-grey);
	color: var(--antracite);
}
.sidenav input[type="checkbox"] {
	display: block;
}
.sidenav .container {
	color: var(--white);
}

.sidenav label {
	color: var(--white);
	padding-top: 20px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	color: var(--light-grey);
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}
.side_nav_button {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 2px;
	top: 50%;
	height: 50px;
	width: 50px;
	margin-top: -65px;
	background-color: var(--white);
	box-shadow: 15px 3px 45px #000;
	border-radius: 5px;
	z-index: 3;

	padding-top: 11px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}
.side_nav_button img{
	mix-blend-mode: multiply;
}
.icon_base {
	width: 35px;
	height: 35px;
}

.icon_base:before {
	font-family: dashicons;
	display: inline-block;
	line-height: 1;
	font-weight: 400;
	font-style: normal;
	speak: none;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: top;
	text-align: center;
}
.icon_contact:before {
	font-size: 34px;
	content: "\f466";
	color: var(--white);
}
.icon_maps:before {
	font-size: 34px;
	content: "\f230";
	color: var(--white);
}
.icon_phone:before {
	font-size: 34px;
	content: "\f525";
	color: var(--white);
}
.icon_info:before {
	font-size: 34px;
	content: "\f348";
	color: var(--white);
}
.sidenav a {
	padding: 0;
	text-decoration: none;
	font-size: var(--font-size5);
	color: var(--white);
	display: block;
	transition: 0.3s;
}
.sidenav .openingstijden strong {
	display: inline-block;
	width: 120px;
}
.footer-widgets-wrapper .openingstijden strong {
	display: inline-block;
	width: 120px;
}
#bereikbaarheid {
	margin-top: 15px;
}
#bereikbaarheid a{
	font-size: var(--font-size6);
}
.openingstijden img {
	-webkit-filter: var(--image_grayscale);
	filter: var(--image_grayscale);
}