@media only screen and (max-width: 1000px) {

   body { font-size: 1.2em; }

}b

@media only screen and (max-width: 600px) {

   body { font-size: 1.0em; }
}

@media only screen and (max-width: 400px) {

   body { font-size: 0.8em; }
}

/********************************************** Für Desktop-PCs: ******************************************************************/

@media only screen and (min-width: 100px) {
	 
	 .col-1 {width: 8.33%;}
	 .col-2 {width: 16.66%;}
	 .col-3 {width: 25%;}
	 .col-4 {width: 33.33%;}
	 .col-5 {width: 41.66%;}
	 .col-6 {width: 50%;}
	 .col-7 {width: 58.33%;}
	 .col-8 {width: 66.66%;}
	 .col-9 {width: 75%;}
	 .col-10 {width: 83.33%;}
	 .col-11 {width: 91.66%;}
	 .col-12 {width: 100%;}
	
	
	body, html
	{
	    margin: 0px; 
	    padding: 0px;
	    height:100%; 
	}
	
	* {box-sizing: border-box;}

	[class*="col-"] {
    	float:left;
    	padding:15px;
	}

	.header {
		background-color:#6E6E6E;
		height:10%;
		min-height:4em;
	}
	
	.header img {
		height:auto;
		max-width:100%;
		margin:-10px;
		margin-left:42%;
	}
	
			
	.navbarright {
		background-color:#c2c2c2;
		height:80%;
		overflow: hidden;
		float:left;
	}
	
	.navbarright li {
		list-style-type: none;
  		margin-left:-45px;
  		margin-top:15px;
  		text-align:center;
  		padding-bottom:50px;
 	}

	
	
	.navbarleft {
		background-color:#c2c2c2;
		height:80%;
		float:right;
	
	}	
	
	#bildercontainer{
		height:50%;
		margin:0px;
		padding:0px;
		position:relative;
	}
	
	#serverbild{
		width:100%;
		height:100%;
		z-index:-1;
		position:absolute;
		opacity:0.4;
	}
	
	#repair{
		position:absolute;
		z-index:102;
		text-align:center;
		top:25%;
	}

	#repair img{
		height:13%;
		width:30%;	
	}

	#virus{
		position:absolute;
		z-index:100;
		text-align:center;
		top:15%;
	}

	#virus img{
		height:14%;
		width:40%;	
	}

	#cloud{
		position:absolute;
		z-index:100;
		text-align:center;
		top:25%;	
	}

	#cloud img{
		height:13%;
		width:30%;	
	}

	#firewall{
		position:absolute;
		z-index:101;
		text-align:center;
		top:25%;
	}

	#firewall img{
		height:13%;
		width:30%;	
	}

	#harddisk{
		position:absolute;
		z-index:100;
		text-align:center;
		top:25%;
	}

	#harddisk img{
		height:9%;
		width:25%;	
	}

	#bikesledge{
		position:absolute;
		z-index:100;
		text-align:center;
		top:25%;
	}

	#bikesledge img{
		height:14%;
		width:30%;	
	}
		
	.menuright {
		background-color:#F2F2F2;
		border-left: 1px solid black;
		height: 30%;
	}
	
	.menuleft {
		background-color:#F2F2F2;
		height:30%;	
	}
	
	.footer {
		background-color:#6E6E6E;
		height:10%;
		position:fixed;
		left:0px;
		bottom:0px;
		padding:10px;
	}

	 /* Dropdown Button */
	.dropbtn {
    	background-color:#6E6E6E ;
    	color: white;
    	font-size: 15px;
    	border: 1px;
    	cursor: pointer;
    	padding:5px;
	}
	
	/* The container <div> - needed to position the dropdown content */
	.dropdown {
	    position: relative;
	    display: inline-block;
	}

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
	    display: none;
	    position:absolute;
	    background-color: #f9f9f9;
	    min-width: 160px;
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	    z-index: 1;
	}
	
	/* Links inside the dropdown */
	.dropdown-content a {
	    color: black;
	    padding: 12px 16px;
	    text-decoration: none;
	    display: block;
	}
	
	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {background-color: #5d5d5d;text-decoration:none;color:white;}
	
	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
	.show {display:block;}
	}

	.menu li {
	cursor: pointer;
	height: 125px;
	margin: 10px 100px 0 10px;
	background: linear-gradient(to bottom left,#58D3F7, #01A9DB);
	margin-top:20px;
	width: 150px;
	position: relative;
	float: left;
	border:1px solid black;
	box-shadow: 1px 1px 1px 1px;
	opacity: 0.9;


	}
	.menu {
  		list-style: none;		
		margin-left:13.5%;	
	}
	.menu p {color:white;}

	#firewall p {padding:20px;}

	#virus p {padding:10px;}

	#cloud p {padding:10px;} 

	#harddisk p {padding:10px;}

	#bikesledge p {padding:10px;}

	#repair p {padding:10px;}
}