/*
Vooral bedoeld voor de info pagina's, dus níet voor de kaart. Met name voor menu en dropdown.
 
*/
body {
    margin: 0;
    padding: 0;
	min-width:520px;
}

/* ######################################## */
/* ######################################## */
/* 1. Header navigation bar */
/* ######################################## */
/* ######################################## */
.navigation-bar {
    background-color: #FFF;
	height: 110px;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	border-bottom: 2px solid gray;
}

#navigation-container {
	height: 70px;
}

#navigation-container a {
    text-decoration: none;
    color: black;
    font-size: 2em;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 10px 10px 20px 10px;
    opacity: 0.7;
	border-right:1px solid gray;
}

/* Change the color of links on hover */
.navigation-bar a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a layout to the active/current link */
.navigation-bar a.active {
  border-bottom: 7px solid gray;
}

/* icon for short menu */
.navigation-bar .dropbtn {
  display: none;
}

.geogemeente-icon {
  height: 100%;
}

#div-icon {
	float: left;
	padding: 0px 0px 0px 10%;
}

#div-totalmenu {
	display: block;
}

#div-menu a {
	padding: 2px 10px 2px 10px;
	border-right: 1px solid gray;
	line-height: 150%;
}

.iconmenu {
	height:40px; /* height within containing div */
}

/* ######################################## */
/* ######################################## */
/* 1.1 Dropdown button on header navigation bar */
/* ######################################## */
/* ######################################## */
.dropbtn {
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  float: right;
  font-size: 1em;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: black;
  font-size: 16px;
  z-index: 1;
  right: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border:0.5px solid gray;
}

/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {background-color: #ddd;} */

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}


/* ######################################## */
/* ######################################## */
/* 1.2 RESPONSIVE HEADER NAVIGATION */
/* ######################################## */
/* ######################################## */
@media only screen and (max-width: 1710px) {
	#navigation-container a {
		font-size: 1.5em;
	}
}

/* @media only screen and (max-width: 1420px) { */
@media only screen and (max-width: 1540px) {
	#navigation-container {
		height: 50px;
	}
	/* #navigation-container a { */
		/* font-size: 1.2em; */
	/* } */
	#div-ref {
		padding: 0px;
	}

	/* #div-menu a { */
		/* padding: 2px 10px 2px 10px; */
	/* } */
}

@media screen and (max-width: 1150px) {
  .navigation-bar.responsive {position: relative;}

  #div-ref {
	padding: 0px;
  }
  
  #div-icon {
	padding: 0px 0px 0px 0%;
  }

  /* #div-menu a { */
	/* padding: 2px 10px 2px 10px; */
  /* } */
}

@media screen and (max-width: 1040px) {
  #navigation-container {
	height: 30px;
  }
  /* #div-menu a { */
	/* padding: 10px 10px 10px 10px; */
  /* } */
}

@media screen and (max-width: 875px) {
  #navigation-container a {
	font-size: 1.2em;
	height: 30px;
  }

  /* #div-menu a { */
	/* padding: 10px 5px 10px 5px; */
  /* } */
}

@media screen and (max-width: 782px) {
  #navigation-container a {
	font-size: 1.1em;
  }
  #navigation-container {
	height: 30px;
  }
  /* #div-menu a { */
	/* padding: 10px 5px 10px 5px; */
  /* } */
}

@media screen and (max-width: 752px) {
  #navigation-container a {
	font-size: 1.0em;
  }
  #navigation-container {
	height: 30px;
  }
  /* #div-menu a { */
	/* padding: 10px 5px 10px 5px; */
  /* } */
}

@media screen and (max-width: 722px) {
  /* hide regular links */
  .navigation-bar div.dropdown a.dropbtn {
	display: inline-block;
    vertical-align: middle;
    height: 40px;
	padding: 10px 0px 0px 0px;
  }
  .navigation-bar.responsive {position: relative;}
  
  .navigation-bar {	overflow: clip; }

  #div-menu {
	display: none;
  }
  
  /* #navigation-container { */
	/* height: 30px; */
  /* } */
  /* #div-menu a { */
	/* padding: 10px 10px 10px 10px; */
  /* } */
}

/* ######################################## */
/* ######################################## */
/* 2. Content */
/* ######################################## */
/* ######################################## */
.contentrow {
	background-image: url("../images/content_achtergrond.png");
	height: 560px;
	background-repeat: no-repeat;	
	background-size: cover;
	position: relative;
	vertical-align: middle;
}

/* Clear floats after the columns */
.contentrow:after {
  content: "";
  display: table;
  clear: both;
}

/* 2.1 Grid */
.gridcontainer {
  display: grid;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3,1fr);
  column-gap: 20px;
  grid-template-rows: auto;
  row-gap: 20px;
  place-items: center;

}

.gridverticalcenter {
  position: abolute;
  transform: translateY(20px);
}

.griditem {
  float: left;
  width: max(50%,330px);
  box-sizing: border-box;
  /* top right bottom left */
  padding: 30px;
  text-align: center;
  font-size: 25px;
  color: #154390;
  font-weight: bold;
  cursor: pointer;
  background-color: #AED6F1;

  /* voor icon + test ín flexitem, zodat beide verticaal centreren */
  display: flex;
 }
 
.griditem:hover {background-color: #1E90FF;}

.menu_icon {
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  width: 70px;
}

.menu_text {
  line-height: 70px;
  padding: 0px 0px 0px 20px;
}

.detailinfo {
  width: 80%;
  margin: auto;
}

.detailcontainer {
	background: #f4f4f4;
	padding: 20px 10% 10px 10%;
}

.detailinnercontainer {
	width: 100%;
	padding: 5px 0px 5px 0px;
	background: #fff;
}


@media only screen and (max-width: 1300px) {
  .gridcontainer {
	grid-template-columns: repeat(2,1fr);
  }
  .griditem {
	padding: 	20px;
	width: 350px;
	font-size:25px;
  }
	
  .menu_icon {
	padding: 0px;
	width: 40px;
  }

  .menu_text {
	line-height: 30px;
	padding: 0px 0px 0px 20px;
  }	
}

@media screen and (max-width: 1000px) {
	.detailinfo {
	  width: 95%;
	}
	.gridcontainer {
	  grid-template-columns: 1fr;
	  row-gap: 5px;
	  column-gap: 100px;
	}
	.griditem {
		padding: 	0px;
		width: 350px;
		font-size:25px;
	}
	.menu_icon {
		width: 40px;
		padding: 0px;
	}
	.menu_text {
		line-height: 40px;
	}
	.griditemtop {
		height: 10px;
	}
}


@media only screen and (max-height: 780px) and (min-width: 1300px) {
 .contentrow {
	height: 400px;
  }

  .griditem {
	padding: 20px;
	width: 350px;
	font-size:25px;
  }

  .menu_icon {
	width: 40px;
	padding: 0px;
  }

  .menu_text {
	line-height: 40px;
	padding: 0px 0px 0px 10px;
  }
}

@media only screen and (max-height: 780px) and (max-width: 1300px) {
 .contentrow {
	height: 400px;
  }
  
  .gridcontainer {
	row-gap: 10px;
  }

  .griditem {
	padding: 10px;
	width: 350px;
	font-size:20px;
  }

  .menu_icon {
	width: 30px;
	padding: 0px;
  }

  .menu_text {
	line-height: 30px;
	padding: 0px 0px 0px 10px;
  }
}

@media only screen and (max-height: 780px) and (max-width: 1000px) {
 .contentrow {
	height: 400px;
  }
  
  .gridcontainer {
	row-gap: 5px;
  }

  .griditem {
	padding: 5px;
	width: 350px;
	font-size:15px;
  }

  .menu_icon {
	width: 20px;
	padding: 0px;
  }

  .menu_text {
	line-height: 20px;
	padding: 0px 0px 0px 10px;
  }
}


/* ##################################### */
/* ##################################### */
/* dropdown achtergrond info */
/* ##################################### */
/* ##################################### */
/* The dropdown container */
.dropdown-achtergrondinfo {
  /* overflow: hidden; */
  display: inline-block;
  position: relative;
}

/* Dropdown button */
.dropdown-achtergrondinfo a {
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  padding:0px 10px 2px 10px;
}

/* Dropdown content (hidden by default) */
.dropdown-content-achtergrondinfo1 {
  display: none;
  /* width: max-content; */
  position: absolute;
  left: 0px;
  background-color: white;
  /* border-color: gray; */
  /* border-style: solid; */
  /* border-width: 1px; */
  /* border-radius: 5px; */

  /* min-width: 160px; */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 0.75em;
  z-index: 1;
  width: max-content;
}

/* Links inside the dropdown */
.dropdown-content-achtergrondinfo1 a {
  display: block;
  /* border-bottom: 2px solid gray; */
  /* border-radius: 10px; */
  /* width: max-content; */
  /* width: 100%; */
  /* padding: 0px; */
  /* background-color: lightgray; */
  /* line-height: calc(0.75em); */
}

/* .dropdown-content-achtergrondinfo1 ul { */
	/* width: max-content; */
/* } */

.dropdown-content-achtergrondinfo1 ul {
  /* width: max-content; */
  /* background-color: #fefefe; */
  /* padding: 0px 5px 0px 0px; */
  /* margin: 0; */
}

.dropdown-content-achtergrondinfo1 li {
  padding: 0px 5px 0px 0px;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content-achtergrondinfo1 a:hover {
  background-color: #999;
}

/* Show the dropdown menu on hover */
.dropdown-achtergrondinfo:hover .dropdown-content-achtergrondinfo1 {
  display: block;
}

/* ############################## */
/* Level 2 */
.dropdown-achtergrondinfo2 {
  /* display: block; */
  /* position: relative; */
  /* padding: 0px; */
  /* width: 100%; */
}

/* .dropdown-achtergrondinfo2 a:hover { */
  /* display: inline-block; */
  /* background-color: #999; */
/* } */

/* Dropdown button */
.dropdown-achtergrondinfo2 a {
  /* font-family: inherit; /* Important for vertical align on mobile phones */ */
  /* margin: 0; /* Important for vertical align on mobile phones */ */
}

/* Dropdown content (hidden by default) */
.dropdown-content-achtergrondinfo2 {
  display: none;
  width: max-content;
  position: absolute;
  left: -140px;
  top: 5px;
  background-color: #fefefe;
  border-color: gray;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  /* width: calc(max-content + 10px); */
  min-widt: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 1em;
  z-index: 1;
  /* padding: 5px; */
}

/* Links inside the dropdown */
.dropdown-content-achtergrondinfo2 a {
  display: block;
  /* border-bottom: 2px solid gray; */
  /* border-radius: 10px; */
  /* width: 100%; */
  /* padding: 0px; */
}

.dropdown-content-achtergrondinfo2 ul {
  /* width: max-content; */
  /* background-color: #fefefe; */
  /* padding: 0px 5px 0px 0px; */
  /* margin: 0 */
}

.dropdown-content-achtergrondinfo2 li {
  /* width: max-content; */
  /* background-color: #fefefe; */
  /* padding: 0px 5px 0px 0px; */
}

/* .dropdown-content-achtergrondinfo2 ul li:hover { */
  /* background-color: #999; */
/* } */

/* Add a grey background color to dropdown links on hover */
.dropdown-content-achtergrondinfo2 a:hover {
  background-color: #999;
}

.dropdown-achtergrondinfo2:hover .dropdown-content-achtergrondinfo2 {
  display: block;
}

/* ############################## */
/* Level 3 */
.dropdown-achtergrondinfo3 {
  /* overflow: hidden; */
  display: block;
  width: calc(100%);
  position: relative;
}

/* .dropdown-achtergrondinfo2 a:hover { */
  /* display: inline-block; */
  /* background-color: #999; */
/* } */

/* Dropdown button */
.dropdown-achtergrondinfo3 a {
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.dropdown-content-achtergrondinfo3 ul {
  width: max-content;
  /* background-color: #fefefe; */
  padding: 0px 5px 0px 0px;
}


/* Dropdown content (hidden by default) */
.dropdown-content-achtergrondinfo3 {
  /* display: none; */
  /* position: absolute; */
  /* left: calc(100%); */
  /* top: 5px; */
  /* background-color: #fefefe; */
  /* border-color: gray; */
  /* border-style: solid; */
  /* border-width: 1px; */
  /* border-radius: 5px; */
  /* width: max-content; */
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  /* font-size: 1em; */
  /* z-index: 1; */
}

/* Links inside the dropdown */
.dropdown-content-achtergrondinfo3 a {
  /* display: block; */
  /* border-bottom: 2px solid gray; */
  /* border-radius: 10px; */
  /* padding: 0px; */
  /* line-height: calc(0.75em); */
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content-achtergrondinfo3 a:hover {
  background-color: #999;
}

.dropdown-achtergrondinfo3:hover .dropdown-content-achtergrondinfo3 {
  /* display: block; */
}

/* ##################################### */
/* ##################################### */
/* op infopagina hover over headertext en icon */
/* ##################################### */
/* ##################################### */

#gemeentenaam {
  text-align: center;
  font-size: 3em;
  color: #154390;
  font-weight: bold;
}

#geogemeentelink:hover {
  color: #1543ff;
}

#geogemeentepointer {
  display: inline-block;
}

#geogemeentepointer img:last-child {
  display: none;  
}
#geogemeentepointer:hover img:last-child {
  display: block;  
}
#geogemeentepointer:hover img:first-child {
  display: none;  
}


/* # ################################### */
/* # Eigen  layerswitcher*/


/* Used for popup photo slider. Based on https://www.w3schools.com/w3css/4/w3.css */
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}