
<!-- 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: 1281px) {
		p {
			margin: 1em 12em 0.5em 9em;
			font: 1.2vw arial;
			font-size:1.2vw;
			font-weight: normal; 
			color:rgb(20,20,20)
		}
		p.ref {
			margin: 1em 1em 1em 11em;
			font: 1vw arial;
			font-size: 1vw;
			font-weight: normal; 
			color:rgb(20,40,150)
		}		
		h1  {
			margin: 0.5em 3em 0.5em 2.5em;
			font: 3vw arial;
			font-size:3vw;
	  		font-weight: bold; 
			color:rgb(20,40,150)
 	  	}
	  	h2  {
	  		margin: 1.5em 6em 0.5em 4.3em;
	  		font: 2.2vw arial;
		  	font-size:2.2vw;
		  	font-weight: bold; 
		  	color:rgb(20,40,150)
 		  }	 
		h3 {
			margin: 1.5em 12em 0.5em 7em;
			font: 1.4vw arial;
			font-size: 1.4vw;
	  		font-weight: bold; 
			color:rgb(20,40,150)
		}	
		li {
			margin: 0em 12em 0.2em 10em;
			font: 1.1vw arial;
			font-size:1.1vw;
			font-weight: normal; 
			color:rgb(20,20,20)
		}		
		iframe {
			width: 1024px; 
			height: 576px;
		}	
      }
	  

      
/* Small display - Mopile device */
      @media screen and (max-width: 1280px) {
		p {
			margin: 1em 1em 1em 2em;
			font: 2vw arial;
			font-size:2vw;
			font-weight: normal; 
			color:rgb(20,20,20)
		}
		p.ref {
			margin: 1em 1em 1em 2em;
			font: 2vw arial;
			font-size:2vw;
			font-weight: normal; 
			color:rgb(20,40,150)
		}		
		h1  {
		  	margin: 1em 1em 1em 0.1em;
		  	font: 5vw arial;
		  	font-size:5vw;
		  	font-weight: bold; 
	  		color:rgb(20,40,150)
 		  }
		h2  {
	  		margin: 1em 1em 1em 0.2em;
	  		font: 4vw arial;
		  	font-size:4vw;
		  	font-weight: bold; 
		  	color:rgb(20,40,150)
 		  }  
		h3 {
			margin: 1em 1em 1em 0.5em;
			font: 3vw arial;
			font-size:3vw;
			font-weight: bold; 
			color:rgb(20,40,150)
		}  
		li {
			margin: 0em 1em 0.2em 4em;
			font: 1.7vw arial;
			font-size:1.7vw;
			font-weight: normal; 
			color:rgb(20,20,20)
		}	
		iframe {
			width: 512px; 
			height: 288px;
		}	
    }
      

		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;
		  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: 1281px) {
			.column {
		    	flex: 100%;
		    	max-width: 20%; /* this limites how many pitures there is in one line */
		  	}
			.row {
				padding: 0em 5em 0em 6em;
			}
		}

	/* Responsive layout - makes a two column-layout instead of four columns */
		@media screen and (max-width: 1280px) {
		  	.column {
		    	flex: 100%;
		    	max-width: 30%;
		  	}
			.row {
				padding: 0em 1em 0em 1em;
				font: 2.5vw arial;
				font-size: 2.5vw;
			}
		}   
		
<!--	 Map definitions 	-->

	#wrapper {
		width: 100%;
		max-width: 2160px; /*2160px;*/ /*actual width of image-- behaves strangely if exceeding this*/
		position: relative;
	}

	#wrapper img {
		max-width: 100%;
	}

	/* Header links */
	#link-main {
		/* border: 1px solid red; */
		height: 100%;
		width: 35%;
		position: absolute;
		left: 0%;
		top: 0%;
	}
	#link-etoall {
		/* border: 1px solid red; */
		height: 50%;
		width: 45%;
		position: absolute;
		left: 50%;
		top: 0%;
	}	
	#link-whatnext {
		/* border: 1px solid red; */
		height: 49%;
		width: 45%;
		position: absolute;
		left: 50%;
		top: 50%;
	}		
		

	#wrapper2 {
		width: 100%;
		max-width: 2160px; /*2160px;*/ /*actual width of image-- behaves strangely if exceeding this*/
		position: relative;
	}

	/* FOOTER */

	#wrapper2 img {
		max-width: 100%;
	}   
   
	/* Footer Links */
  	#link-rpli {
		/* border: 1px solid red; */
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0%;
		top: 0%;
	}
		
	/* Map definitions end */
	/* ******************************************************************** */