@import url(reset.css);
@import url(lightbox.css);
@import url(http://fonts.googleapis.com/css?family=Signika:400,300);
html
{
	background-color:  #FFF;
	overflow-y: scroll;
}
body
{
	color: #777;
	font-family: Signika, Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 18px;
}
	h1,
	h2,
	h3,
	h4
	{
		clear: both;
		color: #464c4e;
		margin: .667em 0 .333em;
		text-align: left;
	}
	h1
	{
		font-size: 2em;
	}
	h2
	{
		font-size: 1.45em;
	}
	a
	{
		text-decoration: none;
		color: #464c4e;
	}
	p
	{
		line-height: 1.45em;
		margin: .667em 0;
	}
	i
	{
		font-style: italic;
	}
	audio,
	video
	{
		display: block;
		outline: none;
	}
	#header,
	#nav,
	#article
	{
		clear: both;
		width: 768px;
		margin: 0 auto;
		overflow: hidden;
	}
		#header img {
			max-width: 480px!important;
			background-color: #464c4e;
			margin: 25px 0;
		}
		#nav li
		{
			float: left;
			width: auto;
			margin-right: .5em;
		}
			#nav li a
			{
				display: block;
				background: #eee;
				text-align: center;
				padding: .667em 1em;
				color: #000;
			}
			#nav li a:hover
			{
				background: #464c4e;
				color: #FFF;
			}
			#nav li a.active
			{
				background: #BBB;
				color: #FFF;
			}
	#article
	{
		margin-bottom: 48px;
		text-align: justify;
	}
		#article h1
		{
			background: #464c4e;
			color: #FFF;
			font-weight: 400;
			padding: .5em;
		}
		#article img
		{
			float: left;
			border: 10px solid #F3F3F3;
			margin: .5em 1em .5em 0;
		}
		#article > img
		{
			border: 0;
			width: 100%;
		}
		#article img.right
		{
			float: right;
			margin: .5em 0 .5em 1em;
		}
		#article section
		{
			border-bottom: 1px solid #FFF;
		}
		#article table
		{
			width: 100%;
		}
		#article tr
		{
			border-bottom: 1px solid #FFF;
		}
		#article td
		{
			background: #F5F5F5;
			padding: .5em 1.5em;
			color: #000;
		}
		#article td.col1
		{
			text-align: right;
		}
		#article td.col2
		{
			text-align: left;
			background: #EEE;
			line-height: 1.45em;
		}
		#article blockquote
		{
			display: block;
			text-align: center;
			clear: both;
			padding: 1.5em;
			border: 1px dotted #CCC;
			background: #EDEDED;
			color: #464c4e;
			font-size: 2em;
			font-style: italic;
			line-height: 1.45em;
			
		}
		#gallery
		{
			width: 102%;
			margin-left: -1%;
		}
			#gallery li
			{
				background: #F7F7F7;
				float: left;
				width: 23%;
				margin: 1%;
			}
				#gallery li img
				{
					float: none;
					border: 0;
					margin: 0;
					display: block;
					width: 90%;
					padding: 5%;
				}
				#front
				{
					width: 1170px;
					margin: 0 0 0 -15px;
					overflow: hidden;
				}
					#aktuell
					{
						float: left;
						background: #464c4e;
						width: 360px;
						height: 480px;
						margin: 10px;
					}
					#aktuell *
					{
						color: #FFF;
						line-height: 1.25em;
						margin: .25em 0;
					}
					#aktuell a
					{
						text-decoration: underline;
					}
					#front img
					{
						float: left;
						padding: 0;
						border: 0;
						margin: 10px;
					}
				.media p
				{
					display: none;
				}
		#filter
		{
			overflow: hidden;
			margin: .5em 0;
		}
		#filter li
		{
			float: left;
			width: 19%;
			text-align: center;
			margin: 0 1.25% 0 0;
		}
		#filter li:last-child
		{
			margin: 0;
		}
		#filter a
		{
			display: block;
			padding: .667em 0;
			background: #F3F3F3;
			color: #000;
		}
		#filter a.checked
		{
			background: #E7E7E7;
			blackground-image: url(check.png);
			blackground-position: 95% center;
			blackground-repeat: no-repeat;
		}
		.vita li
		{
			margin-top: .333em;
			color: #464c4e;
			font-size: 48px;
			text-align: right;
		}
			.vita li li
			{
				padding: .5em;
				background: #F5F5F5;
				margin: 1px 0;
				color: #000;
				font-size: 18px;
				text-align: left;
				line-height: 1.333em;
			}
	label
	{
		display: block;
		text-indent: 0;
		padding-right: 40px;
		margin: 10px 0;
	}
	input[type='text'],
	textarea
	{
		font-size: 48px;
		color: #464c4e;
		width: 100%;
		padding: 20px;
		background: rgba(192,0,144,0.1);
		background: #F1F1F1;
		outline: none;
		border: 0;
		font-family: Signika, Helvetica, Arial, sans-serif;
		resize: none;
	}
	input[name='address']
	{
		display: none;
	}
@media screen and (min-width: 320px) and (max-width: 480px)
{
	#article h1
	{
	}
	#filter li
	{
		float: none;
		margin: 1px 0;
		width: 100%;
	}
	#article blockquote
	{
		padding: .667em;
		font-size: 1.5em;
	}
	#article img
	{
		width: 100%;
	}
}
@media screen and (min-width: 320px)
{
	#header,
	#nav,
	#article
	{
		width: 300px;
	}
	#header img
	{
		width: 100%;
	}
	#nav li
	{
		margin: 1px;
	}
		#nav li a
		{
			font-size: 16px;
			padding: .5em;
		}
	#gallery li
	{
		width: 48%;
	}
	label
	{
		padding-right: 20px;
	}
	input[type=text],
	textarea
	{
		font-size: 18px;
		padding: 10px;
	}
	video
	{
		width: 300px;
		height: auto;
	}
	#front,
	#front img,
	#front div
	{
		width: 100%;
	}
		#front #aktuell
		{
			width: 260px;
			padding: 20px;
			height: auto;
		}
}
@media screen and (min-width: 480px)
{
	#header,
	#nav,
	#article
	{
		width: 460px;
	}
	#engagements > li
	{
		font-size: 48px;
	}
	video
	{
		width: 460px;
		height: auto;
	}
		#front #aktuell
		{
			width: 420px;
			padding: 20px;
			height: auto;
		}
}
@media screen and (min-width: 800px)
{
	#header,
	#nav,
	#article
	{
		width: 760px;
	}
	#header img
	{
		width: auto;
	}
	#nav li
	{
		margin: 0 .5em 0 0;
	}
		#nav li a
		{
			font-size: 18px;
			padding: .5em 1em;
		}
	#gallery li
	{
		width: 23%;
	}
	#engagements > li
	{
		font-size: 64px;
	}
	label
	{
		padding-right: 40px;
	}
	input[type=text],
	textarea
	{
		font-size: 28px;
		padding: 20px;
	}
	video
	{
		width: 640px;
		height: auto;
	}
	#front
	{
		width: 780px;
		margin: 0 0 0 -10px;
	}
		#front img,
		#front div
		{
			width: 240px;
		}
		#front #aktuell
		{
			width: 220px;
			padding: 10px;
			height: 380px;
		}
}
@media screen and (min-width: 1024px) and (max-width: 1279px)
{
	#header,
	#nav,
	#article
	{
		width: 960px;
	}
	#front
	{
		width: 990px;
		margin: 0 0 0 -15px;
	}
		#front img,
		#front div
		{
			width: 300px;
			margin: 15px;
		}
		#front #aktuell
		{
			width: 280px;
			padding: 10px;
			height: 380px;
		}
}
@media screen and (min-width: 1280px)
{
	#header,
	#nav,
	#article
	{
		width: 1140px;
	}
	#gallery li
	{
		width: 18%;
	}
	#engagements > li
	{
		font-size: 72px;
	}
	#front
	{
		width: 1170px;
		margin: 0 0 0 -15px;
	}
		#front img,
		#front div
		{
			width: 360px;
			margin: 15px;
		}
		#front #aktuell
		{
			width: 340px;
			height: 460px;
			padding: 10px;
		}
}

#dinner-cards {
	display: flex;
	gap: 40px;
	margin-bottom: 40px;
}
	#dinner-cards .card {
		flex: 1 0 0;
	}

	#dinner-cards img {
		display: block;
		float: none;
		width: 100%;
		border: 0;
		padding: 0;
		background-color: transparent;
		margin-bottom: 10px;
	}

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

	#dinner-cards {
		flex-wrap: wrap;
	}

	#dinner-cards .card {
		flex-basis: 100%;
	}
}