/* Global CSS that are applied for all screen sizes */


.nav ul {
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.5em;
	font-weight: 100;
}

.nav li {
    border: 1px #FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.nav li span {
	display: block;
}

.nav a {
	display: block;
	color: #FFF;
	text-decoration: none;
	}
p {
    font-size: 14px;
    color: #000;
}

/* Adding some background color to the different menu items */

.nav li:nth-child(12n+1) { background: #0099CC;}
.nav li:nth-child(12n+2) { background: #339999;}
.nav li:nth-child(12n+3) { background: #333399;}
.nav li:nth-child(12n+4) { background: #2F407A;}
.nav li:nth-child(12n+5) { background: #91A7D0;}
.nav li:nth-child(12n+6) { background: #01BEB2;}

/*++++++++++++++++++++ 4 colummns-version +++++++++++++++++++++*/
@media (min-width:44em) {

	.nav li {
		display: block;
		border: 3px #FFF;
		float: left;
		width: 25%;    /* 4 columns */
		font-size: 1.1em;
		height: 120px;
	}
		
	.nav a {
			padding: 0.5em;		
	}
	
	.nav img {
			height: 40px;
			width: auto;
	}
	.container > header {
			font-size: 1.1em;
		} 
	}
	p {
		font-size: 14px;
	}
	/*++++++++++++++++++++ 3 colummns-version ++++++++++++++++++++++*/
	@media (max-width: 43.99em) {
	
	
	.nav li {
		display: block;
		border: 2px #FFF;
		float: left;
		width: 33.3%;    /* 4 columns */
		font-size: 1.0em;
		height: 100px;
	}
		
	.nav a {
			padding: 0.5em;		
	}   
		
	.nav img {
			height: 35px;
			width: auto;
	}
	.container > header {
			font-size: 0.9em;
		}    
	}
	p {
		font-size: 14px;
	}
	/*++++++++++++++++++++ 2 colummns-version ++++++++++++++++++++++*/
	@media (max-width: 36em) {
	
	
	.nav li {
		display: block;
		border: 2px #000;
		float: left;
		width: 50%;    /* 4 columns */
		font-size: 1.0em;
		height: 100px;
	}
		
	.nav a {
			padding: 0.5em;		
	}
		
	.nav img {
			height: 30px;
			width: auto;
	}
	.container > header {
			font-size: 0.7em;
		}
	}
	p {
		font-size: 14px;
	}
	/*++++++++++++++++++++ 1 colummns-version ++++++++++++++++++++++*/
	@media (max-width: 20em) {
	
	
	.nav li {
		display: block;
		border: 1px solid white;
		float: left;
		width: 100%;    /* 1 column */
		font-size: 1.0em;
		height: 30px;
	}
		
	.nav a {
		padding-left: 0.5em;
		padding-top: 0.2em;
	}
	
	.image  {
		display: none;  /*Bild wird auf kleinen Displays entfernt */
	}
	.container > header {
			font-size: 0.6em;
		}
	}
	p {
		font-size: 14px;
	}