@media (min-width: 768px)
{
	.overlay-close {
		display: none;
	}
}

@media (max-width: 767px)
{
	.navbar-collapse,
    .collapse:not(.show){
		display: block;
	}
	.overlay.overlay-scale {
	    display: block;
	    justify-content: initial;
	    flex-grow: initial;
	}


	#hoofdmenu{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;

	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
		margin: 0 !important;
    	padding: 114px 36px 0;
	}

	#hoofdmenu li{
		margin:0;
		text-align: left;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
    	margin-bottom: 29px;
	}

	#hoofdmenu li a{
		line-height:36px;
		width: 100%;
		color: #7e6b5e;
		font-size: 23px;
		font-weight: 400;
	}
	#hoofdmenu li a:after {
		display: none;
	}

	#mobiel_onder_menu {
		box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
  	  	padding: 14px 36px 30px;
		display: block;
	}
	.top_item {
		margin: 0;
	}
	.topmenu_tekst {
		color: #717171;
		font-size: 15px;
		font-weight: 400;
		line-height: 20px;
	}
	#hoog_contrast {
		display: block;
		border-bottom: 1px solid #c2c2c2;
    	padding-bottom: 13px;
	}
	#hoog_contrast_btn {
	    display: block;
	    float: right;
	}
	#hoog_contrast_btn:before {
		background-color: #000000;
	}

	#lettergrootte_container {
		position: relative;
	}
	#lettergrootte {
	    display: block;
	    padding-top: 14px;
	}
	#lettergrootte_items {
	    position: absolute;
	    display: block;
	    height: 40px;
	    margin: 0;
	    left: 50%;
	    transform: translateX(-50%);
	    width: calc(100% - 72px);
		top: 0;
	}
	#lettergrootte_items:before {
	    width: 100%;
	    height: 3px;
	    background-color: #000000;
	    top: 18px;
	    left: 50%;
	    transform: translateX(-50%);
	}
	.t_groot {
		float: right;
	}
	.lettergrootte_item {
    	border: 3px solid #41c0f0;
	}
	.lettergrootte_item:after {
		content: "";
	    position: absolute;
	    color: #7e6b5e;
	    font-size: 10px;
	    font-weight: 400;
	    top: 15px;
	    left: 50%;
	    transform: translateX(-50%);
	}


	.lettergrootte_standaard {
		left: -1px;
	}
	.lettergrootte_standaard.actief {
		left: -3px;
	}
	.lettergrootte_standaard.actief:after {
		content: "100%";
	}


	.lettergrootte_groot {
	    left: 50%;
	    transform: translateX(-50%);
	}
	.lettergrootte_groot.actief {
	    left: 50% !important;
	    transform: translateX(-50%);
	}
	.lettergrootte_groot.actief:after {
		content: "125%";
	}


	.lettergrootte_groter {
	    left: initial;
	    right: -1px;
	}
	.lettergrootte_groter.actief {
	    left: initial !important;
	    right: -3px;
	}
	.lettergrootte_groter.actief:after {
		content: "150%";
	}
	/* Overlay style */
	.overlay {
	  position: fixed;
	  z-index: 10000;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  background: #ffffff;
	}

	/* Overlay closing cross */
	.overlay .overlay-close {
		width: 24px;
    	height: 23px;
		position: absolute;
	    right: 38px;
	    top: 69px;
		overflow: hidden;
		border: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='23' viewBox='0 0 24 23'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M2.454 23.167L.333 21.046 21.546-.167l2.121 2.121z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M.333 1.954L2.454-.167l21.213 21.213-2.121 2.121z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
		text-indent: 200%;
		color: transparent;
		outline: none;
		z-index: 10001;
		background-color: transparent;
	}

	/* Menu style */

/*
	.overlay ul {
	  list-style: none;
	  padding: 0;
	  margin: 30px auto !important;
	  display: block;
	  height: auto;
	  position: relative;
		text-align: center;
	}

	.overlay ul.special {
		margin: 0 0 20px 0;
	}

	.overlay ul li {
	  display: block;
	  height: 20%;
	  height: -webkit-calc(100% / 8);
	  height: calc(100% / 8);
	  min-height: 45px;
		width: 90%;
    	margin: 0 auto !important;
	  -webkit-backface-visibility: hidden;
	  -ms-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.overlay ul li a {
	  font-size: 16px !important;
	  font-weight: 300 !important;
	  display: block;
	  color: #fff;
	  -webkit-transition: color 0.2s;
	  transition: color 0.2s;
		-webkit-transition: background 0.2s;
	  transition: background 0.2s;
	}


	.overlay ul.special a {
		margin: 0 0 10px 0;
		padding: 10px 20px;
		border-radius: 10px;
		background: #fff;
		color: #4e537f;
	}
	.overlay ul.special a:hover,
	.overlay ul.special a:focus {
		color: #fff;
		background: #1c1c1c;
		text-decoration: none;
	}

	.overlay ul li a:hover,
	.overlay ul li a:focus {
	  color: #f0f0f0;
	}*/

	/* Effects */
	.overlay-scale {
		overflow: auto;
	  visibility: hidden;
	  opacity: 0;
	  -webkit-transform: scale(0.9);
	  -ms-transform: scale(0.9);
	  transform: scale(0.9);
	  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	  transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	}

	.overlay-scale.open {
	  visibility: visible;
	  opacity: 1;
	  -webkit-transform: scale(1);
	  -ms-transform: scale(1);
	  transform: scale(1);
	  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	  transition: transform 0.4s, opacity 0.4s;
	}
}

@media screen and (max-height: 30.5em)
{
	.overlay nav
	{
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li
	{
		min-height: 34px;
	}
}