
<!-- FIRST normal text and Headers 1 and 2    -->

	body {
	  	margin: 0 0 0 0;
		font-family: arial;
	}

/* Normal size - PC or Pad */
      @media screen and (min-width: 801px) {
		p {
			margin: 1em 6em 1em 6em;
			font: 1.4vw arial;
			font-size:1.4vw;
			font-weight: normal; 
			color:rgb(20,20,20)
		}
		h1  {
			margin: 1em 6em 1em 2.8em;
			font: 3vw arial;
			font-size:3vw;
	  		font-weight: bold; 
			color:rgb(20,40,150)
 	  	}
	  	h2  {
	  		margin: 1em 6em 1em 3.4em;
	  		font: 2.5vw arial;
		  	font-size:2.5vw;
		  	font-weight: bold; 
		  	color:rgb(20,40,150)
 		  }	  
           
      }
      
/* Small display - Mopile device */
      @media screen and (max-width: 800px) {
		p {
			margin: 1em 1em 1em 1em;
			font: 3vw arial;
			font-size:3vw;
			font-weight: normal; 
			color:rgb(20,20,20)
		}
     		h1  {
		  	margin: 1em 1em 1em 1em;
		  	font: 6vw arial;
		  	font-size:6vw;
		  	font-weight: bold; 
	  		color:rgb(20,40,150)
 		  }
		h2  {
	  		margin: 1em 1em 1em 1em;
	  		font: 5vw arial;
		  	font-size:5vw;
		  	font-weight: bold; 
		  	color:rgb(20,40,150)
 		  }  
  
      	}
      

		img {
			margin: 0em 0em 0em 0em;
  			max-width: 100%;
 		 	height: auto;
		}

<!-- Here styles of the Responsive Image Grid    -->
			
		* {
		  box-sizing: border-box;
		}
				
		.header {
		  text-align: center;
		  padding: 32px;
		}
			
		.row {
		  display: flex;
		  flex-wrap: wrap;
		  padding: 0em 5em 0em 5em;
		  font: 1.4vw arial;
		  font-size: 1.4vw;
		  font-weight: normal;
		}
			
		/* Create four equal columns that sits next to each other */
		.column {
		  flex: 20%;
		  max-width: 25%;
		  padding: 0em 0.5em 0em 0.5em;
		}
			
		.column img {
		  margin-top: 0.4em;
		  vertical-align: top;
		  width: 100%;
		}
			
		/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
		@media screen and (min-width: 801px) {
			.column {
		    		flex: 100%;
		    		max-width: 20%; /* this limites how many pitures there is in one line */
		  	}
		}

		/* Responsive layout - makes a two column-layout instead of four columns */
		@media screen and (max-width: 800px) {
		  	.column {
		    		flex: 50%;
		    		max-width: 100%;
		  	}
			.row {
			font: 3vw arial;
			font-size: 3vw;
			}
		}    
		/* Map definitions */
		#wrapper {
			width: 100%;
			max-width: 2160px; /*actual width of image-- behaves strangely if exceeding this*/
			position: relative;
		}

		#wrapper img {
			max-width: 100%;
		}

		#link-oulu {
			/* border: 1px solid red; */
			height: 16%;
			width: 25%;
			position: absolute;
			left: 3%;
			top: 0%;
		}
	  	#link-ksi {
			/* border: 1px solid red; */
			height: 7%;
			width: 26%;
			position: absolute;
			left: 3%;
			top: 18%;
		}
		#link-fmt {
			/* border: 1px solid red; */
			height: 7%;
			width: 35%;
			position: absolute;
			left: 30%;
			top: 18%;
		}
		#link-eg-fi {
			/* border: 1px solid red; */
			height: 7%;
			width: 10%;
			position: absolute;
			left: 85%;
			top: 3%;
		}
		#link-funding {
			/* border: 1px solid red; */
			height: 90%;
			width: 94%;
			position: absolute;
			left: 3%;
			top: 3%;
		}
		#link-top {
			/* border: 1px solid red; */
			height: 10%;
			width: 94%;
			position: absolute;
			left: 3%;
			top: 0%;
		}
		#link-oulu2 {
			/* border: 1px solid red; */
			height: 50%;
			width: 94%;
			position: absolute;
			left: 3%;
			top: 10%;
		}
		#link-fmt2 {
			/*border: 1px solid red;*/
			height: 40%;
			width: 94%;
			position: absolute;
			left: 3%;
			top: 60%;
		}
		/* Map definitions end */
		/* ******************************************************************** */