* {
    box-sizing: border-box;
}

/*Colors:
background-color: #fdfdfd
background-navigation: #772034
weinrot: #772034
*/

body {
	background-color: #fdfdfd;
	font-family: "Century Gothic", "Verdana", sans-serif;
	font-size: 95%;
	color: #772034;
	margin-right: 0px;
	margin-left: 0px;
}

header, section, footer, aside, nav, main, article, figure, img {
    display: block; 
}

h1 {
	font-size: 2.5em;
	border-bottom: 7px dotted #772034;
}

h2 {
	font-size: 1.5em;
	color: #772034;
}


/*Navigation for Mobile phones*/
label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 20px;
  background: #772034;
  cursor: pointer;
  color: #fdfdfd;
}

label.responsive-nav-label span {
  margin-right: 10px;  
}

nav {
  position: absolute;
  top: -9999px;
  padding: 10px;
}

input#responsive-nav {
	display: none;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}

ul.navigation-m {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #fdfdfd;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0px 3px 10px rgba(0,0,0, 0.5);
}

li.navigation-m {
	border-top: 1px solid #fdfdfd;
}

li a{
	display: block;
	color: #fdfdfd;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}


/*Columns & Rows*/
/*Different Devices*/

.row:after {
    content: "";
    clear: both;
    display: block;
}


/*For mobile phones first:
width=100% in class*="col-" */
[class*="col-"] {
	width: 100%;
/*    float: left;
    padding: 15px;
    border: 10px solid red;*/
}

/*For tablets:*/
@media only screen and (min-width: 600px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
	
	label.open-menu-label {
		display: none;
	}
	
	p a.toplink {
		display: none;
	}
	
	/*Navigation für alles was größer als 600px*/
	ul.navigation {
		display: block;
		margin-left: auto;
		margin-right: auto;
		list-style-type: none;
		padding: 0;
		overflow: hidden;
		background-color: #fdfdfd;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		box-shadow: 0px 3px 10px rgba(0,0,0, 0.5);
	}

	li.navigation {
		position: relative;
		display: inline;
		border-top: none;
		margin-left: 24px;
		margin-right: 24px;
	}

	li a{
		display: inline-block;
		color: #772034;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

	li a:hover {
		text-decoration: underline;
	}

	input#responsive-nav,
	label.responsive-nav-label {
		display: none;
	}
	
/*Klasse um im Header die drei Divs vertikal aneinander auszurichten (Logo/Öffnungszeiten/Kontakt)*/
.vertical-align {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
	}
	
/*Slideshow*/
	.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col {
		padding:0 6px;
	}

	.w3-section,.w3-code {
		margin-top:16px!important;
		margin-bottom:16px!important
	}

	.w3-opacity,.w3-hover-opacity:hover {
		opacity:0.60
	}

	.w3-opacity-off,.w3-hover-opacity-off:hover {
		opacity:1
	}

	img.demo {
		padding: 4px;
	}

	img.displaynone {
		display: none;
	}

	div.unserespeisenundkonzept {
		min-width: 100px;
		max-width: 1600px;
		padding-bottom: 5%;
		/*border: 5px solid blue;*/
	}
	
	div.unserespeisenundkonzepttext {
	min-width: 100px;
	max-width: 1600px;
	padding-bottom: 2%;
		padding-left: 6%
	/*border: 5px solid blue;*/
	}
	
	div.unserespeisenundkonzeptbutton {
		min-width: 100px;
		max-width: 1600px;
		padding-bottom: 5%;
		padding-left: 6%
		/*border: 5px solid blue;*/
	}

}

/*For desktop:*/
@media only screen and (min-width:768px) {	
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
	
	label.open-menu-label {
		display: none;
	}
	
/*Klasse um im Header die drei Divs vertikal aneinander auszurichten (Logo/Öffnungszeiten/Kontakt)*/
.vertical-align {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
	}

/*Slideshow*/
	.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col {
		padding:0 6px;
	}

	.w3-section,.w3-code {
		margin-top:16px!important;
		margin-bottom:16px!important;
	}

	.w3-opacity,.w3-hover-opacity:hover {
		opacity:0.60
	}

	.w3-opacity-off,.w3-hover-opacity-off:hover {
		opacity:1
	}

	img.demo {
		padding: 4px;
	}

	img.displaynone {
		display: none;
	}
	
	div.unserespeisenundkonzept {
		min-width: 100px;
		max-width: 1600px;
		padding-bottom: 5%;
		/*border: 5px solid blue;*/
	}
	
	div.unserespeisenundkonzepttext {
	min-width: 100px;
	max-width: 1600px;
	padding-bottom: 2%;
		padding-left: 6%
	/*border: 5px solid blue;*/
	}
	
	div.unserespeisenundkonzeptbutton {
		min-width: 100px;
		max-width: 1600px;
		padding-bottom: 5%;
		padding-left: 6%
		/*border: 5px solid blue;*/
	}
}


/*Content sections*/
section {
	padding-left: 14px;
	padding-right: 14px;
	padding-top: 3%;
	padding-bottom: 50px;
	/*border: 5px red solid;*/
	min-height: 100vh;
	height: auto;
}

section.speisekarte {
	padding-top: 0px;
	padding-bottom: 50px;
}

section.speisenseitepaddingspeisen {
	padding-top: 0px;
}

section.red {
	background-color: #772034;
	min-width: 100vw;
}

/*TODO: Noch min und max width festlegen je nachdem wie die mobile website beschaffen sein soll*/
div.content {
	min-width: 100px;
	max-width: 1400px;
	padding-top: 0px;
	margin: auto;
	/*border: 5px solid blue;*/
}

div.wir {
	min-width: 100px;
	max-width: 1400px;
	padding-bottom: 5%;
	padding-left: 6%
	/*border: 5px solid blue;*/
}

div.parkplatz {
	min-width: 100px;
	max-width: 1400px;
	padding-bottom: 2%;
	padding-left: 6%
	/*border: 5px solid blue;*/
}

div.aktuelles {
	min-width: 100px;
	max-width: 1400px;
	padding-bottom: 5%;
	padding-left: 6%
	/*border: 5px solid blue;*/
}

div.headline {
	min-width: 100px;
	max-width: 1000px;
	padding-bottom: 0px;
	padding-top: 2%;
	padding-left: 5%;
	/*border: 5px solid blue;*/
}

div.headlineunserespeisen {
	padding-top: 0px;
}

div.speisekarte {
	min-width: 100px;
	max-width: 100%;
	padding-top: 0;
	margin: auto;
	/*border: 5px solid blue;*/
}

div.header {
	padding-left: 14px;
	padding-right: 14px;
	padding-top: 3%;
	padding-bottom: 1%;
	float: left;
}

div.tabelle {
	float: left;
}

div.unserespeisenundkonzept {
	min-width: 100px;
	max-width: 1600px;
	padding-bottom: 5%;
	/*border: 5px solid blue;*/
}

div.unserespeisenundkonzepttext {
	min-width: 100px;
	max-width: 1600px;
	padding-bottom: 2%;
	padding-left: 6%
	/*border: 5px solid blue;*/
}

div.unserespeisenundkonzeptbutton {
	min-width: 100px;
	max-width: 1600px;
	padding-bottom: 5%;
	padding-left: 6%
	/*border: 5px solid blue;*/
}

div.extrapadding {
	padding-top: 8%;
}

p.teamvorstellung {
	margin-left: 50px;
	margin-right: 50px;
}

p.parkplatz {
	margin-left: 0px;
	margin-right: 200px;
}

p.whitetext {
	color: #fdfdfd;
}


/*Bilder*/
img {
    max-width: 100%;
    height: auto;
}

img.logo {
	max-width: 70%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.speisekarte {
	max-width: 50%;
}

img.icon {
	max-width: 24px;
	min-width: 24px;
	margin-right: 10px;
}

img.tabelle {
	max-width: 80%;
	/*border-radius: 50%;*/
	border: 60px solid transparent;
	margin-top: -60px;
}

img.parkplatz {
	/*border-radius: 50%;*/
	border: 60px solid transparent;
	margin-top: -60px;
}

img.headlines{
	max-height: 75px;
	min-height: 60px;
}

/*andere Styleangaben*/

.greybackground {
	background-color: #bebebe;
	font-size: 1em;
	padding: 10px;
	text-align: center;
}

a:link, a:visited, a:hover, a:active, a:focus {
	color: #772034;	
}

p a:link, p a:visited {
	color: #fdfdfd;
	font-weight: bold;
}

p a:hover, p a:active, p a:focus {
	background: #772034;
	color: #fdfdfd;
}

a.obenlink:link, a.obenlink:visited {
	float:right; 
	text-decoration: none;
	margin-top: 50px;
	color: #fdfdfd;

}
a.obenlink:hover, a.obenlink:active, a.obenlink:focus {
	float:right; 
	text-decoration: none;
	margin-top: 50px;
}

p a.button:link, p a.button:visited {
	padding: 20px;
	border-radius: 4px;
	background-color: #772034;
	color: #fdfdfd;
	font-weight: normal;
	font-size: 1em;
	text-decoration: none;
}

p a.button:hover, p a.button:active, p a.button:focus {
	padding: 20px;
	border-radius: 4px;
	background-color: #6A192C;
	color: #fdfdfd;
	font-weight: normal;
	font-size: 1em;
	text-decoration: none;
}


b {
	color: #772034;
}

/*vertikales Zentrieren des Bilds auf der Startseite*/
.zentriert {
	width: 100%;
	margin-left: -22px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: traslateY(-50%);
	z-index: -1;
}

/*Anfahrtstext ein bisschen nach unten schieben*/
.ausnahme {
margin-top: 2%;
}


/*Tabelle*/
table
{ 
    margin-left: auto;
    margin-right: auto;
}

/*Speisen Bilder Grid*/

img.foodgrid {
	max-width: 100%;
	max-height: 350px;
}

p.foodgrid {
	margin-left: 0px;
	margin-right: 60px;
}

div.foodgrid {
	padding-bottom: 1%;
}


/*Slideshow*/
@media only screen and (max-width: 599px) {
	.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col {
		display:none;
	}

	.w3-section,.w3-code {
		display:none;
	}
	
	img.demo {
		padding: 4px;
	}

	img.mySlides {
		max-width: 80%;
		margin: 10px;
	}
}