/* Layout: "Grumme 2"
	 Datum: Februar 2015
	 Datei: mobile.css
	 Author: Thorsten Gumball
	 Authorenwebseite: http://mozilo-layouts.thorstn.com
	 */
/* Maximal Größe: 980 Pixel */
@media screen and (max-width: 980px) {
	#content {
		margin: 0 auto;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none
	}

	#topheader {
		margin-top: 0
	}

	#footer {
		margin-bottom: 0
	}

	#fotogalerie .thumbnail {
		margin: 10px 15px 10px 5px
	}
}

/* Maximal Breite: 768 Pixel */
@media screen and (max-width: 768px) {
	body {
		color: #222
	}

	.searchdiv {
		padding-right: 0;
		padding-bottom: 20px
	}

	input.searchtextfield {
		max-width: 220px
	}

	#topheader {
		font-size: 18px
	}

	#topheadername {
		font-size: 28px
	}

	#mainmenu {
		display: none
	}

	#detailmenu {
		display: none
	}

	#maincontent-left div {
		display: none
	}

	#maincontent-right {
		margin-left: 0;
		width: 95%;
		padding: 20px 10px
	}

	#menu-res {
		display: block;
		margin: 0 auto;
		width: 100%;
		text-align: left;
		z-index: 10
	}

	#menu-res-open {
		display: block;
		width: 100%;
		background: #fff;
		padding: 10px 0;
		text-align: right
	}

	#menu-res-open a {
		display: block;
		color: #555;
		font-size: 34px;
		line-height: 30px;
		font-weight: 700;
		text-decoration: none;
		padding-right: 30px
	}

	#menu-res-nav {
		background: #000;
		display: block;
		position: absolute;
		top: -9999px;
		left: 0;
		width: 100%;
		min-height: 30px;
		z-index: 20
	}

	a.submenu,
	a.submenuactive {
		font-size: 17px
	}

	a.submenu:before {
		content: "» "
	}

	a.submenuactive:before {
		content: "» "
	}

	ul.mainmenu {}

	li.mainmenu {
		float: none;
		display: block;
		margin: 0;
		font-size: 17px;
		line-height: 28px;
		padding: 0
	}

	li.mainmenu:first-child {
		margin-top: 20px
	}

	li.mainmenu:last-child {
		margin-bottom: 0
	}

	a.menu {
		display: block;
		background: #000;
		border: none;
		color: #eee;
		font-weight: 400;
		padding: 3px 10px;
		border: none;
		border-bottom: 1px #333 solid
	}

	a.menu:hover {
		background: #444;
		color: #eee;
		border-bottom: 1px #333 solid
	}

	a.menuactive {
		display: block;
		background: #444;
		color: #eee;
		font-weight: 400;
		border: none;
		border-bottom: 1px #333 solid;
		padding: 3px 10px
	}

	a.menuactive:hover {
		background: #666;
		color: #eee
	}

	li.mainmenu li.detailmenu {
		float: none;
		display: block;
		font-size: 17px;
		margin: 0
	}

	li.mainmenu li.detailmenu:first-child {
		margin-top: 0
	}

	li.mainmenu li.detailmenu a {
		color: #fff;
		padding: 3px 5px 3px 30px;
		margin: 0
	}

	li.mainmenu li.detailmenu a:hover {
		text-decoration: none
	}

	ul.detailmenu {
		margin: 0
	}

	li.detailmenu a.submenu {
		margin: 0
	}

	a.submenu {
		display: block;
		background: #000;
		border: none;
		margin: 0;
		color: #eee;
		padding: 3px 10px;
		border: none;
		border-bottom: 1px #333 solid
	}

	a.submenu:hover {
		background: #444;
		border-bottom: 1px #333 solid
	}

	a.submenuactive {
		display: block;
		background: #444;
		color: #eee;
		border: none;
		border-bottom: 1px #333 solid;
		padding: 3px 10px
	}

	a.submenuactive:hover {
		background: #666
	}

	#menu-res-nav:target {
		top: 0
	}

	#menu-res-nav ul li.close {
		display: block;
		width: 100%
	}

	#nav-close {
		padding: 15px 10px 25px 30px
	}

	#nav-close a,
	#nav-close a:hover {
		display: block;
		font-size: 17px;
		font-weight: 400;
		line-height: 24px;
		padding: 5px 10px;
		color: #ddd;
		text-decoration: none
	}

	#mainmenu li.detailmenu {
		display: block
	}

	#fotogalerie .thumbnail {
		margin: 15px
	}

	.nur-mobil {
		display: block;
		margin-top: 15px;
	}
}



/* Maximal Breite: 500 Pixel */
@media screen and (max-width: 500px) {
	body {
		background: #fff
	}

	#topheadername {
		font-size: 24px;
		margin-right: 5px
	}

	h1 {
		font-size: 18px;
		margin-bottom: 8px
	}

	h2 {
		font-size: 15px;
		margin-bottom: 8px
	}

	h3 {
		font-size: 15px
	}

	.suche {
		margin-left: 20px
	}
}

@media screen and (max-width: 420px) {
	#topheader {
		max-height: 60px;
		font-size: 16px;
		padding: 10px 10px 20px
	}

	input.searchtextfield {
		max-width: 180px
	}

	#fotogalerie .thumbnail {
		margin: 10px
	}
}

@media screen and (max-width: 360px) {
	#topheader {
		padding: 10px 10px 30px;
		text-align: center
	}
}