diff --git a/fonts/AUTHENTICSans-90.woff b/fonts/AUTHENTICSans-90.woff
deleted file mode 100644
index aa8b159..0000000
Binary files a/fonts/AUTHENTICSans-90.woff and /dev/null differ
diff --git a/fonts/lunchtype24-regular-expanded.woff b/fonts/lunchtype24-regular-expanded.woff
deleted file mode 100755
index 1b3023d..0000000
Binary files a/fonts/lunchtype24-regular-expanded.woff and /dev/null differ
diff --git a/fonts/lunchtype25-regular_condensed-webfont.woff b/fonts/lunchtype25-regular_condensed-webfont.woff
deleted file mode 100755
index c95777c..0000000
Binary files a/fonts/lunchtype25-regular_condensed-webfont.woff and /dev/null differ
diff --git a/images/layers-2x.png b/images/layers-2x.png
index 200c333..9839040 100644
Binary files a/images/layers-2x.png and b/images/layers-2x.png differ
diff --git a/index.htm b/index.htm
old mode 100644
new mode 100755
index 876be93..eb87a76
--- a/index.htm
+++ b/index.htm
@@ -14,25 +14,32 @@
 
 <body>
 
-<h2> Field </h2>
-<h2> Format </h2>
-<h2> Language </h2>
+<div class="tags_menu">
+  <div class="tags_header">
+    <h1>Tags</h1>
+    <button onclick="myDropmenu()" class="dropbtn"> </button>
+  </div>
+
+  <div id="myDropdown" class="dropdown-content">
+    <h2>Field</h2>
+    <div id="leaflet_layers"><!--Here the layer control menu will be added--></div>
+  </div>
+</div>
 
 
 <div id='map'></div>
 
+
 <script>
 
+/* When the user clicks the menu button, toggle between hiding and showing the dropdown content */
+function myDropmenu() {
+  document.getElementById("myDropdown").classList.toggle("show");
+}
 
 //map layers
 //var artobj = L.layerGroup();
 
-
-//function to remove duplicates in array
-function removeDuplicates(data) {
-  return [...new Set(data)]
-};
-
 // Leaflet
 var map = L.map('map', {
 	zoomControl: false, //removes zoom controls
@@ -43,7 +50,6 @@ var map = L.map('map', {
 });
 
 var yx = L.latLng;
-
 var xy = function(x, y) {
 	if (L.Util.isArray(x)) { // When doing xy([x, y]);
 		return yx(x[1], x[0]);
@@ -52,41 +58,38 @@ var xy = function(x, y) {
 };
 
 var bounds = [xy(0, 0), xy(0, 0)]; //did this to remove border around map, showing on firefox
-
 var image = L.imageOverlay('', bounds).addTo(map); //imageOverlay is the map image
 map.fitBounds(bounds);
-
-map.setView(xy(1250, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
+map.setView(xy(1050, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
 
 
 // Wiki Api
 var apiEndpoint = "https://hub.xpub.nl/networksofcare/mediawiki/api.php";
 
+// my query: All pages with category "diagram". Show "category", show "connection", show "field".
 var params ="action=ask&format=json&query=[[Category%3ADiagram]] |%3FCategory |%3FConnection |%3FField";
 
-// my query: All pages with category "diagram". Show "category", show "connection", show "field".
-// "diagram::include" is my way of annotating on the wiki which pages should be visible on the diagram. e.g. I may not want help pages there, main page, etc.
-// "connection::" is my annotation on the wiki for pages that are connected to others. e.g. "Lídia" page is connected to "Varia Code of Conducts". "ginger coons" page is connected to "LGM Code of Conducts".
-
-//Main categories static location:
-var myIcon2 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Networking' });
-var myIcon3 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Linking' });
-var myIcon1 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Archiving' });
-L.marker(xy(1000, 400), {icon: myIcon1}).addTo(map);
+
+//Main categories with static location:
+var myIcon2 = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(150, 30), html: 'Networking' });
+var myIcon3 = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(60, 40), html: 'Linking' });
+var myIcon1 = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(60, 40), html: 'Archiving' });
+L.marker(xy(1000, 400), {icon: myIcon1}).addTo(map); //Archiving
 L.marker(xy(1600, 1200), {icon: myIcon2}).addTo(map); //Networking
 L.marker(xy(100, 1400), {icon: myIcon3}).addTo(map);  //Linking
 
 
-
 // exploring animations
 //L.marker(xy(1000, 400), {icon: L.icon({iconUrl: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png', className: 'blinking'})}).addTo(map);
 
-var dict = {} //this objects works as a dictionary to store page names and their coordinates
+var dict = {} //this object works as a dictionary to store page names and their coordinates
 var connectionarray = []; //this array will store page names and their connections
-var overlays = {}; //dictionary for map layers
+var overlays = {}; //object for map layers
+
 
+// making random coordinates for the points
 
-// makes random coordinates for the points
+//in archiving
 var lanArray = [];
 for (var i = 1; i <= 50; i++) { //in 3+4th quadrant
     lanArray.push(i * 50); //* 50 means I only have coordinates ending with 0 or 5, making them more far apart
@@ -97,9 +100,10 @@ for (var i = 1; i <= 15; i++) {
     lonArray.push(i * 50);
 }
 
-var lan1Array = [];
+//in networking
+var lan2Array = [];
 for (var i = 25; i <= 50; i++) {//2nd quadrant
-    lan1Array.push(i * 50);
+    lan2Array.push(i * 50);
 }
 
 var lon2Array = [];
@@ -107,28 +111,38 @@ for (var i = 15; i <= 30; i++) {
     lon2Array.push(i * 50);
 }
 
-var obj = L.layerGroup();
+//in linking
+var lan3Array = [];
+for (var i = 1; i <= 20; i++) {//1st quadrant
+    lan3Array.push(i * 50);
+}
+
+var lon3Array = [];
+for (var i = 15; i <= 25; i++) {
+    lon3Array.push(i * 50);
+}
+
 
 //create a variable for every field.
 //var variable_field = L.layerGroup();
 
 
-//The function to wrap the result. It waits for api call to be completed.
+//The function to wrap the result. It waits for API call to be completed.
 var callback = function (response) {
 	var pages = response.query.results;
 	Object.keys(pages).forEach(function(key) { //for loop
 		var pagename = pages[key].fulltext;//getting json keys
 		var url = pages[key].fullurl;
 		var category = pages[key].printouts.Category[0].fulltext;
+    var category1 = pages[key].printouts.Category[1].fulltext;
 		var connection = pages[key].printouts.Connection[0];
 		var field = pages[key].printouts.Field;
-		console.log(pagename); //printing to console
+		console.log(pagename);
+
 
 		if (category == "Category:Archiving"){
 
-			for(var i = 0; i < field.length; i++){ //for each page with "field"...
-				overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
-			}
+      var obj = L.layerGroup();
 
 			var lan = lanArray[Math.floor(Math.random() * lanArray.length)]; //chooses random number from the array, x coordinate
 			lanArray.splice(lanArray.indexOf(lan), 1); //removes the chosen number from the array to avoid repetitions
@@ -139,21 +153,25 @@ var callback = function (response) {
 			var archivingcoordinates = xy(lan, lon);
 
 			//var travel = L.polyline([archivingcoordinates, xy(1000, 400)], {color:'lightgrey', weight: 10, lineCap: 'butt', offset: 50}).addTo(map).addTo(obj);//connects to "Archiving"
-			var myIcon = L.divIcon({ iconSize: new L.Point(200, 50), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });//divIcon is the name, label. There's different types of icons.
-      //L.circle(archivingcoordinates, {color: 'grey', radius: 5, fillOpacity: 100}).addTo(map);
+
+			var myIcon = L.divIcon({ iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });//divIcon is the name, label.
 
 			L.marker(archivingcoordinates, {icon: myIcon}).addTo(map).addTo(obj);
 
 
-			dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates
+      for(var i = 0; i < field.length; i++){ //for each page, each "field"...
+				overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
+			}
 
+			dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates
 
 		}
 
 
 		if (category == "Category:Networking"){
-			var lan1 = lan1Array[Math.floor(Math.random() * lan1Array.length)]; //chooses random number from the array, x coordinate
-			lan1Array.splice(lan1Array.indexOf(lan1), 1); //removes the chosen number from the array to avoid repetitions
+
+			var lan1 = lan2Array[Math.floor(Math.random() * lan2Array.length)]; //chooses random number from the array, x coordinate
+			lan2Array.splice(lan2Array.indexOf(lan1), 1); //removes the chosen number from the array to avoid repetitions
 
 			var lon2 = lon2Array[Math.floor(Math.random() * lon2Array.length)]; //chooses random number from the array, x coordinate
 			lon2Array.splice(lon2Array.indexOf(lon2), 1); //removes the chosen number from the array to avoid repetitions
@@ -162,13 +180,33 @@ var callback = function (response) {
 
 			//var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
 
-			var myIcon = L.divIcon({ className: 'leaflet-div-icon2', iconSize: new L.Point(150, 40), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
+			var myIcon = L.divIcon({ className: 'leaflet-div-icon2', iconSize: new L.Point(150, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
 			//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
 			L.marker(networkingcoordinates, {icon: myIcon}).addTo(map);
 
 			dict[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
 		}
 
+
+    if (category1 == "Category:Linking"){
+
+      var lan3 = lan3Array[Math.floor(Math.random() * lan3Array.length)]; //chooses random number from the array, x coordinate
+      lan3Array.splice(lan3Array.indexOf(lan3), 1); //removes the chosen number from the array to avoid repetitions
+
+      var lon3 = lon3Array[Math.floor(Math.random() * lon3Array.length)]; //chooses random number from the array, x coordinate
+      lon3Array.splice(lon3Array.indexOf(lon3), 1); //removes the chosen number from the array to avoid repetitions
+
+      var linkingcoordinates = xy(lan3, lon3);
+      console.log(pagename, linkingcoordinates);
+      //var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
+
+      var myIcon = L.divIcon({ className: 'leaflet-div-icon3', iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
+      //L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
+      L.marker(linkingcoordinates, {icon: myIcon}).addTo(map);
+
+      dict[pagename] = [lan3, lon3];//adding to the dictionary the page name and its coordinates
+    }
+
 		if (  typeof connection != 'undefined' ) { //if there is a "connection"
 			var connection2 = pages[key].printouts.Connection[0].fulltext; //get the value
 			connectionarray.push(connection2, pagename); //add value to array
@@ -181,8 +219,7 @@ var callback = function (response) {
 	  return new Promise(resolve => {
 	    setTimeout(() => {
 	      resolve('resolved');
-				console.log(overlays);
-
+				//console.log(overlays);
 	    }, 1000);
 	  });
 	}
@@ -191,14 +228,24 @@ var callback = function (response) {
 	  console.log('calling');
 	  const result = await resolveAfter1Second();
 
-		L.control.layers(null, overlays).addTo(map); //null is for no baselayer
+		var layer = L.control.layers(null, overlays).addTo(map); //null is for no baselayer
+
+    // placing layers controls on the dropdown menu
+    var htmlObject = layer.getContainer(); // Returns the HTMLElement that contains the control.
+    var a = document.getElementById('leaflet_layers') // adds to html
+
+    function setParent(el, newParent){ // "unchilds" and gives new parent
+      newParent.appendChild(el);
+    }
 
-	  console.log(result);
-	  // expected output: 'resolved'
+    setParent(htmlObject, a);
+
+	  console.log(result); // expected output: 'resolved'
 	}
 
 	asyncCall();
 
+
 //connecting with dash lines the pages with connections
 	var groups = [];
 
@@ -213,14 +260,10 @@ var callback = function (response) {
 	for(var i = 0; i < groups.length; i++){
 		var val1  = dict[groups[i][0]]; //gets the value stored in the dictionary of the first element of each subarray in "groups"
 		var val2 = dict[groups[i][1]]; //gets the value of the second element
-		var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 2, dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
+		var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 1.5, dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
 	}
 
-//console.log(removeDuplicates(fieldarray));
-
-}; //ends big function
-
-
+}; //main function ends
 
 var scriptTag = document.createElement("script"); // Dynamically create a "script" tag
 scriptTag.src = apiEndpoint + "?" + params + "&callback=callback"; // Point to the query string
diff --git a/style.css b/style.css
old mode 100644
new mode 100755
index 30648f4..5219fd3
--- a/style.css
+++ b/style.css
@@ -6,12 +6,16 @@
 
 @font-face {
     font-family: "lunchtype2";
-    src: url("/var/www/html/mediawiki/skins/Vector/fonts/lunchtype25-regular_condensed-webfont.woff");
+    src: url("./mediawiki/skins/Vector/fonts/lunchtype25-regular_condensed-webfont.woff");
     font-weight: normal;
 }
 
+@font-face {
+    font-family: "standard";
+    src: url("./mediawiki/skins/Vector/fonts/standard-book-webfont.woff");
+    font-weight: normal;
+}
 
-/* code than comes with leaflet */
 
 .leaflet-pane,
 .leaflet-tile,
@@ -147,7 +151,6 @@
 
 .leaflet-control {
 	position: relative;
-
 	z-index: 800;
 	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
 	pointer-events: auto;
@@ -177,7 +180,7 @@
 
 	}
 .leaflet-right  {
-	right: 1%;
+	right: 0;
 
 	}
 .leaflet-top .leaflet-control {
@@ -190,7 +193,7 @@
 	margin-left: 10px;
 	}
 .leaflet-right .leaflet-control {
-	margin-right: 10px;
+	/*margin-right: 10px;*/
 	}
 
 
@@ -281,7 +284,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 /* visual tweaks */
 
 .leaflet-container {
-	background: #ddd;
+	/*background: #ddd;*/
 	outline: 0;
 
 	}
@@ -293,13 +296,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 .leaflet-zoom-box {
 	border: 20px dotted #38f;
-	background: rgba(255,255,255,0.5);
+	/*background: rgba(255,255,255,0.5);*/
 	}
 
 
 /* general typography */
 .leaflet-container {
-	font-family: "lunchtype", serif;
+	font-family: "standard", serif;
 	font-size: calc(10px + 0.5vw);
 	line-height: 150%;
 
@@ -307,15 +310,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 
 /* general toolbar styles */
-
-
 .leaflet-bar {
 	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 	border-radius: 4px;
 	}
 .leaflet-bar a,
 .leaflet-bar a:hover {
-	background-color: #fff;
+	/*background-color: #fff;*/
 	border-bottom: 1px solid #ccc;
 	width: 26px;
 	height: 26px;
@@ -325,14 +326,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	text-decoration: none;
 	color: black;
 	}
-.leaflet-bar a,
-.leaflet-control-layers-toggle {
+.leaflet-bar a {
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
 	display: block;
+
 	}
 .leaflet-bar a:hover {
-	background-color: #f4f4f4;
+	/*background-color: #f4f4f4;*/
 	}
 .leaflet-bar a:first-child {
 	border-top-left-radius: 4px;
@@ -345,7 +346,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 .leaflet-bar a.leaflet-disabled {
 	cursor: default;
-	background-color: #f4f4f4;
+	/*background-color: #f4f4f4;*/
 	color: #bbb;
 	}
 
@@ -378,84 +379,83 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 	/* layers control */
 
-	.leaflet-control-layers {
-		box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-		background: #fff;
-		border-radius: 5px;
-		}
-	.leaflet-control-layers-toggle {
-		background-image: url(images/layers.png);
-		width: 36px;
-		height: 36px;
-		}
-	.leaflet-retina .leaflet-control-layers-toggle {
-		background-image: url(images/layers-2x.png);
-		background-size: 26px 26px;
-		}
-	.leaflet-touch .leaflet-control-layers-toggle {
-		width: 44px;
-		height: 44px;
-		}
-	.leaflet-control-layers .leaflet-control-layers-list,
-	.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
-		display: none;
-		}
-	.leaflet-control-layers-expanded .leaflet-control-layers-list {
-		display: block;
-		position: relative;
-		}
-	.leaflet-control-layers-expanded {
-		padding: 6px 10px 6px 6px;
-		color: #333;
-		background: #fff;
-		}
-	.leaflet-control-layers-scrollbar {
-		overflow-y: scroll;
-		overflow-x: hidden;
-		padding-right: 5px;
-		}
-	.leaflet-control-layers-selector {
-		margin-top: 2px;
-		position: relative;
-		top: 1px;
-		}
-	.leaflet-control-layers label {
-		display: block;
-		}
-	.leaflet-control-layers-separator {
-		height: 0;
-		border-top: 1px solid #ddd;
-		margin: 5px -10px 5px -6px;
-		}
-
-	/* Default icon URLs */
+.leaflet-control-layers {
+	box-shadow: none;
+	/*background-color: rgba(237, 237, 237, 0.95);*/
+}
+
+.leaflet-control-layers-toggle, .leaflet-retina .leaflet-control-layers-toggle {
+  display: none;
+  height: 0;
+}
+
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded {
+  display: block;
+}
+
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+}
+
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+}
+
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+}
+
+.leaflet-control-layers label {
+  font-family: "standard";
+	display: block;
+  left: 0;
+  /*float: left;*/
+  margin-right: 3%;
+  cursor: pointer;
+  color: black;
+  font-size: calc(8px + 0.2vw);
+  line-height: 15px;
+  font-size: calc(9px + 0.2vw);
+  border-bottom: 1.5px solid black;
+  margin: 1%;
+  width: 20em;
+  text-transform: capitalize;
+	}
+
+.leaflet-control-layers label:hover{
+  color: grey;
+}
+
+
+input[type="checkbox"]:not(:checked),
+input[type="checkbox"]:checked {
+  display: none;
+}
+
+input[type="checkbox"]:not(:checked) {
+}
+
+input[type="checkbox"]:checked{
+}
+
+
+/* Default icon URLs */
 
 .leaflet-default-icon-path {
 	background-image: url(images/marker-icon.png);
 	}
 
 /* attribution and scale controls */
-
 .leaflet-container .leaflet-control-attribution {
-	background: #fff;
-	background: rgba(255, 255, 255, 0.7);
-	margin: 0;
-	}
-.leaflet-control-attribution,
-.leaflet-control-scale-line {
-	padding: 0 5px;
-	color: #333;
-	}
-.leaflet-control-attribution a {
-	text-decoration: none;
-	}
-.leaflet-control-attribution a:hover {
-	text-decoration: underline;
-	}
-.leaflet-container .leaflet-control-attribution,
-.leaflet-container .leaflet-control-scale {
-	font-size: 11px;
+  display: none;
 	}
+
 .leaflet-left .leaflet-control-scale {
 	margin-left: 5px;
 	}
@@ -472,7 +472,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	-moz-box-sizing: border-box;
 	     box-sizing: border-box;
 
-	background: #fff;
+	/*background: #fff;*/
 	background: rgba(255, 255, 255, 0.5);
 	}
 .leaflet-control-scale-line:not(:first-child) {
@@ -600,7 +600,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-tooltip {
 	position: absolute;
 	padding: 6px;
-	background-color: #fff;
+	/*background-color: #fff;*/
 	border: 1px solid #fff;
 	border-radius: 3px;
 	color: #222;
@@ -677,52 +677,46 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	display:none !important;
 }
 
-/* my code from here */
-
-
 
+/* my code from here */
 .leaflet-container {
-	background-color:rgba(255,0,0,0.0);
+	/*background-color:rgba(255,0,0,0.0);*/
 }
 
 html, body {
 	height: 100%;
 	margin: 0;
 	/*background-image: url("IMG_8709.jpg");*/
-	background-color: white;
-	background-size: cover;
-
 }
 
 #map {
 	width:100%;
 	height:100%;
-
+  overflow: hidden;
 }
 
 .leaflet-div-icon {
   background-color: transparent;
 	color: black;
 	border: none;
-	font-size: calc(9px + 2vw);
+	font-size: calc(9px + 1.5vw);
   font-family: "lunchtype2";
   font-weight: bold;
   text-transform: uppercase;
 	margin-left: 0px;
 	margin-top: 0px;
 	text-align: center;
-
 }
 
 .leaflet-div-icon a {
-  font-family: "lunchtype";
+  font-family: "standard";
 	font-size: calc(9px + 0.2vw);
 	text-transform: none;
   text-decoration: none;
   font-weight: normal;
-  border: 2px solid lightgrey;
+  border: 2px solid #e3e3e3;
   border-radius: 500px;
-  background-color: lightgrey;
+  background-color: #e3e3e3;
   padding: 5px;
   transform: rotate(45deg);
   -moz-transform: rotate(-45deg);
@@ -733,16 +727,15 @@ html, body {
 	color: white;
 	border: none;
 	font-size: calc(9px + 0.8vw);
-  font-family: "lunchtype";
+  font-family: "standard";
   font-weight: bold;
-
 	margin-left: 0px;
 	margin-top: 0px;
 	text-align: center;
 }
 
 .leaflet-div-icon2 a {
-  font-family: "lunchtype";
+  font-family: "standard";
   font-size: calc(9px + 0.2vw);
 	text-transform: none;
   text-decoration: none;
@@ -754,18 +747,47 @@ html, body {
   color: white;
 }
 
+.leaflet-div-icon3 a {
+  font-family: "standard";
+  font-size: calc(9px + 0.2vw);
+	text-transform: none;
+  text-decoration: none;
+  font-weight: normal;
+  border: 2px solid #929292;
+  border-radius: 500px;
+  background-color: #929292;
+  padding: 5px;
+  color: black;
+}
 
+.leaflet-div-icon4{
+  font-size: calc(9px + 1.2vw);
+  font-family: "lunchtype2";
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  color: black;
+}
 
-@keyframes fade {
-   0%   {left:0px; top:0px;}
-  75%  {left:0px; top:50px;}
-  100% {left:0px; top:0px;}
+.leaflet-div-icon5 {
+  font-size: calc(9px + 1.2vw);
+  font-family: "lunchtype2";
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  color: lightgrey;
 }
 
-.blinking {
-  animation: fade 3s linear infinite alternate;
+.leaflet-div-icon6 {
+  font-size: calc(9px + 1.2vw);
+  font-family: "lunchtype2";
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  color: #706f6f;
 }
 
+
 .menu{
 	position: absolute;
 	top: 0px;
@@ -773,20 +795,83 @@ html, body {
 	z-index: 1;
 }
 
-h1, h2 {
-	font-family: "authentic";
-	margin:1%;
-}
 
 h1 {
-	background-color: blue;
-	color: white;
-	font-size: calc(10px + 1vw);
-	text-transform: uppercase;
+  font-family: "standard";
+	font-size: 12px;
+  margin-left: 1%;
+  border-bottom: 1.5px solid black;
+  width: 75%;
+  float: left;
+  line-height: 150%;
 }
 
 h2 {
-	display: inline;
-	font-size: calc(10px + 0.5vw);
-	padding-right: 10%;
+font-family: "standard";
+text-transform: uppercase;
+font-size: 12px;
+margin: 1%;
+}
+
+h3 {
+font-size: calc(11px + 1vw);
+border-bottom: 1.5px solid black;
+margin: 1%;
+height: 13px;
+text-transform: capitalize;
+}
+
+.tags_menu {
+  position: fixed;
+  z-index: 1000;
+  top: 65%;
+  background-color: rgba(237, 237, 237, 0.95);
+  left: 1em;
 }
+
+.tags_header{
+  width: 10em;
+}
+
+.dropbtn {
+  border: none;
+  padding: 16px;
+  cursor: pointer;
+  background: url(./images/layers-2x.png);
+  background-repeat: no-repeat;
+  background-size: auto 80%;
+  background-position: center;
+  float: right;
+}
+
+#myDropdownIcon {
+  display: none;
+  border: none;
+  padding: 16px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: url(./images/layers.png);
+  background-repeat: no-repeat;
+  background-size: auto 80%;
+  background-position: center;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.dropdown-content {
+  display: none;
+  position:static;
+  z-index: 10000;
+  width: 10em;
+  overflow: hidden;
+}
+
+.dropdown-content a {
+  color: black;
+  text-decoration: none;
+  display: block;
+}
+
+.show {display: block;}
