/**
* html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
* Richard Clark (http://richclarkdesign.com)
* http://cssreset.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #000;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

/* GENERAL */

html, body {
	height: 100%;
}

body {
	overflow: none;
	background-color: #fefdf8;
	
}

div#wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.inner {
	display: table;
	width: 100%;
	height: 100%;
}

.center {
	display: table-cell;
	vertical-align: middle;
}


section#content {

}

section#content .inner {
	padding: 10px;

}

section#content p {
	text-align: center;
	color: #000;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 1.1px;
	font-weight: normal;
	padding-top: 10px;
}


hr#trennlinie {
	width: 180px;
	margin: 0 auto;
}

section#links div#gmaps {
	background-color: #000;
	padding: 10px;
	display: block;
	float: left;
}


section#links img#facebook {
	float: left;
	width: 30px;
	margin-right: 30px;
	margin-top: 5px;
}
section.overlay, #karte_hover {
	position: absolute;
	display: none;
	z-index: 50;
}

section#speisekarte {
	cursor: pointer;
	width: 113px;
	display: block;
	margin: 0 auto;
}

section#speisekarte #karte_hover {
	display: none;
	top:0;
	left: 0;
	margin: 20px;
	width: 100%;
	height: 100%;

}

section#speisekarte img{
	display: block;
	padding: 25px 0 50px;
}

#karte #waveludwig {
	opacity: 0.6;
}

#karte:hover #waveludwig {
	opacity: 1;
}


#karte:hover #menu_klein {
	opacity: 0.3;
}

#karte #menu_klein {
	opacity: 1;
}




section.overlay {
	top: 0;
	width: 100%;
	display: block;
	height: 100%;
	background-color: #000;
	display: none;
}

section.overlay .content {
	text-align: center;
	padding: 20px 0 20px;
	font-size: 13px;
	line-height: 16px;
}

section.overlay span {
	font-weight: bold;
}

section.overlay span.aLeft {
	text-align: left;
	display: block;
}

section.overlay span.aCenter {
	text-align: center;
	display: block;
	padding-top: 3px;
}

section.overlay span.aRight {
	text-align: right;
	display: block;
	padding-top: 1px;
}

.close {
	position: absolute;
	right: 50%;
	margin-right: -15px;
	margin-top: -20px;
}

#lammHalbe {
	display: block;
	width: 150px;
	margin: 0 auto;
}

#lammHalbe img {
	width: 100%;
}

#start {
	position: relative;
	z-index: 20;
/*	background-color: rgba(255, 255, 255, 0.7);*/
}


/* IMAGE */


#div-bg-left, #div-bg-right {
	position: absolute;
}

#div-bg-left {
	left: 0;
}

#div-bg-right {
	right: 0;
}

#div-bg-left img, #div-bg-right img {
}

img#logo {
	padding-top: 10px;
	padding-bottom: 30px;
	width: 130px;
	margin: 0 auto;
	display: block;
}

img#h1-trenn {
	width: 460px;
	height: 3px;
	padding: 20px 0;
	margin: 0 auto;
	display: block;
}

img#btm-trenn {
	width: 40px;
	margin: 0 auto;
	display: block;	
	padding: 20px 0;
}



/* FONTS */

a, p, h1, h2, h3, h4 {
	font-family: 'Helvetica', Arial, sans-serif;
	color: #000;
	text-transform: uppercase;
}

section#content h1 {
	text-align: center;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 2px;
}

section#content h4 {
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 18px;
    padding: 0 0 5px;
    text-align: center;;
    margin-bottom: 20px;
}

section#content h2 {
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 26px;
    margin: 0 auto;
    text-align: center;
    width: 320px;
}		

section#menu {
	padding-top: 40px;
	display: block;
	width: 412px;
	margin: 0 auto;
}

section#links {
	padding-bottom: 25px;
	display: block;
	width: 230px;
	margin: 25px auto 0;
}

section#links ul {

	text-align: center;
	margin-bottom: 10px;

}

section#links ul li {
		list-style-type: none;
}

section#links ul  li a{
	width: 230px;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 1.5px;
	line-height: 34px;
	font-style: italic;
	text-decoration: underline;
}

section#links ul  li a:hover{
	
	font-style: normal;
}

section#menu li a {
	width: 100px;
}

section#menu ul{
	text-align: center;
	margin-bottom: 10px;
}

ul#social {
	margin-top: 5px;
	margin-bottom: 20px;
}

section#menu ul#social {
	
}

section#menu ul#social li {
	display: inline;
}

section#menu ul#social li:hover {
	opacity: 0.7;
}

section#menu ul#social li a {
	
}

ul#social li a img {
	width: 40px;
	height: auto;
}


section#menu ul li{
	text-align: center;
	margin-bottom: 10px;
	padding: 0 5px;
	display: inline-block;

}

section#menu li a {
	width: 100px;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 1.5px;
	line-height: 18px;
}

section#menu li a:hover {
	text-decoration: line-through;
}

section#bottom h2 {
	text-align: center;
	font-size: 11pt;
	padding-bottom: 20px;
	width: 400px;
}

section#bottom p {
	text-align: center;
	font-size: 9pt;
	line-height: 13pt;
	padding-bottom: 15px;
}

section.overlay p, section.overlay a, section.overlay h3 {
	color: white;
	background-color: black;
}

section.overlay p.top {
	font-size: 13px;
	line-height: 22px;
	margin: 40px 0 40px;
	letter-spacing: 1px;
}

section.overlay h3 {
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 26px;
	margin-bottom: 15px;
	margin-top: 30px;
}

section.overlay a {
	color: white;
}

section.overlay p {
	font-size: 12px;
	letter-spacing: 1.3px;
	line-height: 20px;
	margin-bottom: 30px;
	max-width: 400px;
	padding: 0 20px;
	font-weight: lighter;
	margin: 0 auto;
}

footer p {
	text-align: center;
	font-size: 7pt;
	padding-bottom: 5px;
}

a {
	color: black;
	
}

footer a {
	color: black;
}



/* ANIMATION */

#waveludwig {
	width: 300px;
	margin-top: 50px;
	margin-left: -150px;
	left: 50%;
	position: absolute;
	z-index: 999;
	opacity: 0.3;
}

#ludwig-animation img {
    margin: 0;
}

#ludwig-animation {
    width: 300px;
    height: 100px;
    margin: 0 auto;
    background-image: url("gfx/derLudwig-sprite3_300.png");
    background-repeat: no-repeat;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation: waveludwig 3s steps(38) infinite;
    -moz-animation: waveludwig 3s steps(38) infinite;
    -ms-animation: waveludwig 3s steps(38) infinite;
    -o-animation: waveludwig 3s steps(38) infinite;
    animation: waveludwig 3s steps(38) infinite;
}

@-webkit-keyframes waveludwig {
   from { background-position:    0px; }
     to { background-position: -11400px }
}

@-moz-keyframes waveludwig {
   from { background-position:    0px; }
     to { background-position: -11400px }
}

@-ms-keyframes waveludwig {
   from { background-position:    0px; }
     to { background-position: -11400px }
}

@-o-keyframes waveludwig {
   from { background-position:    0px; }
     to { background-position: -11400px }
}

@keyframes waveludwig {
   from { background-position:    0px; }
     to { background-position: -11400px }
}   


/* OTHER */
@media screen and (min-width: 1200px) {

}

/* TABLETS */
@media screen and (max-width: 800px) {
	
}

/* SMARTPHONES */
@media screen and (max-width: 480px) {
	div#wrap {
	}
	
	section#content, section#bottom, footer {
	margin: 0px 20px;
	}
	
	img#logo {
		width: 100px;
		padding-top:20px;
		padding-bottom: 10px;
	}

	img#h1-trenn {
		display: none;
	}
	
	img#btm-trenn {
		padding-bottom: 30px;
	}

	section#content h4 {
	    font-size: 8px;
	    letter-spacing: 1px;
	    line-height: 18px;
	    padding: 0 0 5px;
	    text-align: center;
	}

	section#content h2 {
	   font-size: 14px;
	    letter-spacing: 1px;
	    line-height: 18px;
	    text-align: center;
	}		

	section#speisekarte {
		width: 50px;
		display: block;
		margin: 0 auto;
	}

	section#speisekarte img{
		display: block;
		padding:5px 0 15px;
		width: 50px;
	}

	hr#trennlinie: {
		display: none;
		opacity: 0;
	}

	section#menu {
	   display: block;
	    margin: 0 auto;
	    padding-top: 5px;
	    width: 300px;
	}

	section#menu ul li a img {
		width: 70px;
	}

	section#content h2 {
		width: auto;
	}

}