	<style type="text/css">
/* unvisited link */
a:link {
    color: white;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: white;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: white;
    background: #C8C8C8;
}

/* selected link */
a:active {
    color: white;
    text-decoration: none;
}

#box { position: fixed;   
       height: auto; width: 900px;    
      float:right;
  top: 40%;
  left: 30%;
  
  margin-top: -50px;
  margin-left: -50px;
       }
       
#box2 { position: relative;   
       height: auto; width:950px;    
       left:-40px; top:610px; 
       float:right;
         font-size: 0.74em; 
 }
 
 
 #logo { border: 0px dashed #F00;
	padding: 10px;
        position: absolute;
        left: 2em;
        top: 10px;
        width: 50px;
 }
  
   #counter { border: 0px dashed #F00;
	padding: 10px;
        position: absolute;
        left: 2em;
        top: 100%;
        width: 50px;
 }
  
         
#box3 { position: absolute;   
       height: auto; width: auto;    
      float:right;
  top: 30%;
  left: 30%;
  
  margin-top: -50px;
  margin-left: -50px;
       }
 
 #box4 {position: absolute;
  left: 50%;
  margin-left: -50%; 
  top: 10%;}
 
       
         
#nav { border: 0px dashed #F00;
	padding: 10px;
        position: absolute;
        right: 2em;
        top: 10px;
        width: 650px;
 }

   
body {
    font-size: 0.94em; // oder
    font-size: 94%;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 150%;
    color: white;
        background-image: url("/map_web3.jpg");
        background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 50px;

}
      
      .logo img {
	width: auto;
	height: 100px;
	
	
	
position:relative; font-size:50px; z-index:2;
}

	* {
		margin: 0;
		padding: 0;
			top: -80px;
	}
	ul {
		width:53%;
		float:right;
		padding-right: 20px;
		list-style-type: none; 
	position:relative;  
	z-index:1
	
	
	}

	li {
		width:25%;
		float:right;
		border-right: 0px solid #eee;
	
	}
	li:last-child {
		border-right:none;
	}

	li a {
	
		display: block;
		width:100%;
		background:none;
	
		text-decoration: none;
		font-size: 0.94em; // oder
		font-size: 94%;
		font-family: Helvetica, Arial, sans-serif;
		line-height: 100%;
		color: white;
	}

	@media screen and (max-width: 768px) {
		#menu {
			width:1.7em;
			float:left;
			display: block;
			background:#ddd;
			font-size:1.35em;
			text-align: center;
		}
		
		
		
		#nav { position: fixed;
 height: auto; width:auto;    
    top:31%;
         font-size: 1.44em;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
		list-style-type: none;
 margin-top: -50px;
  margin-left: -50px;
  text-align: center;
		
		 }
		#nav.js {
			display: none;
		}
			#logo {
			height: 80px;
			  margin-top: 5px;
  margin-left: 50px;
		}
		
		
		ul {
			width:100%; 
			list-style:none;
			background-color: lightgrey;
		
				x	
		}
		li {
			width:100%;
			border-right:none;
			
			
		}
		
		#box { position: absolute;   
       height: auto; width: auto;    
      float:right;
  top: 200px;

  
  margin-top: -50px;
  margin-left: -50px;
       }
       
       
      
      
         visibility:hidden;
   
       }
	}

	@media screen and (min-width: 768px) {
		#menu {
			display: none;
			
		}
		#logo {
			height: 100px;
			
		}
	}

 

      
</style>