/*#######################################################################*/
/*#######################################################################*/
/*#######################################################################*/

@media only screen and (max-width: 320px) {
	/* mobile: 320 or smaller */

	.des, .tab {
		display: none;
	}
	.mob {
		display: block;
	}
	
	#menu.mob {
		position: fixed;
		top: 0;
		left: 4.688%;
		height: 32px;		
		width: 40.625%;
		z-index: 1;
	}

		#menu.mob div {
			display: none;
			border-radius: 5px;
		}
			#menu.mob div ul li {
				display: block;
			}
			#menu.mob div ul li a {
				padding-left: 10%;
				padding-right: 10%;
				font-size: 1.0em;
				line-height: 1.6em;
				text-transform: uppercase;
			}

	#menu.mob span {
		display: block;
		width: 32px;
		height: 32px;
		background: url("../img/menu.png") 0 0/32px 32px;
		z-index: 100;
	}

		#menu.mob input {
			display: block;
			width: 32px;
			height: 32px;
			position: absolute;

			cursor: pointer;
 
			opacity: 0; /* hide this */
			z-index: 2; /* and place it over the hamburger */
		}
		
		#menu.mob input:checked {
			width: 44.828%;			
		}
		#menu.mob input:checked ~ div,
		#menu.mob:hover div
		{
			display: block;
		}
		#menu.mob input:checked ~ span {
			background: url("../img/cross.png") 0 0/32px 32px;
		}

		
	#full {
		width: 100%;
		
	}
		
	header#logo, aside#quote, nav, section#main, div#picsContainer, aside#news, footer p {
		margin-left: 4.688%; /* R oR von 4 mR = 15 / 320 */
	}
	header#logo {
		amargin-top: 60px;
		width: 65.625%; /* 3 oR von 4 mR = 210 / 320 */
		

	}	

	aside#quote {
		clear: both;
		width: 90.625%;
		border-radius: 50px 15px 50px 15px;
		margin-top: 30px;
		margin-bottom: 30px;
	}
		aside#quote h1 {
			font-size: 0.9em;		
			line-height: 1.3em;
		}
		aside#quote h2 {
			font-size: 0.6em;
			line-height: 1.0em;
		}
	nav {
		display: none;
		clear: both;
		width: 90.625%;
	}
		nav ul li {
			float: left;
			width: 40.625%; /* 2 Spalten */
			height: 30px;
		}
				nav ul li a {
					border-radius: 0px 0px 0px 0px;
				}
			nav ul li:nth-of-type(odd) {
				clear: left;
				margin-right: 9.375%; /* 2 x 15px */
			}		
			nav ul li:nth-last-of-type(2) {
				border: none;			
			}
	nav ul li a {
				line-height: 30px;
				border-radius: 5px;
			}
	section#main {
		clear: both;
		width: 90.625%;
		margin-top: 15px;
	}
	
	section#main article div {
      float: right;
			width: 44.828%; /* 2 oR von 4 oR */
			margin-left: 10.345%; /* 2R oR von 4 oR */
      margin-bottom: 10px;
			clear: both;
    }
		
		div.newsPics {
			clear: both;
			
		}
		
		section#main.news div.newsCont div.newsPics div {
			width: 40.625%;
			float: left;
		}
		section#main.news div.newsCont div.newsPics div:nth-of-type(even) {
			margin-left: 9.375%;
		}
		
		section#main.news div.newsCont div.newsPics div a {
			width: 100%;
		}
	
	
	div#picsContainer {
		clear: both;
		width: 90.625%; /* 4 Spalten */
		margin-left: 4.688%;
		margin-bottom: 30px;
	}
		div#picsContainer div {
			
			float: left;
			width: 44.828%;
		}
			div#picsContainer div:nth-of-type(odd) {
				clear: both;
				margin-right: 10.345%; /* 2x Rand von 4 Spalten mR */
			}
		
	aside#news {
		clear: both;
		width: 90.625%;
		margin-top: 15px;
	}
		aside#news article header h1 {
			font-size: 1.2em;
			line-height: 1.2em;
		}
		aside#news article p {
			font-size: 0.8em;
			line-height: 1.2em;
		}
		aside#news article a.plakat {
			float: left;
			width: 40.625%; /* 2 Spalten */
			margin-left: 9.375%; /* 2x Rand = 2 x 15 / 320 */
		}

	footer {
		border-top-style: solid;
		border-top-width: 1px;			
	}
		footer p, footer p a {
			font-size: 0.8em;
			line-height: 1.6em;
			
		}	
}