@charset "utf-8";
/* writen by */
/* Cristian Gheorghiu - Webdesign */
/* www.cristiang.de */





html, body {
	height: 100%;
	margin: 0px;
	width: 100%;
}





/***    L A Y O U T    ***/

header, footer, #Status, #Offer {
	/*background-color: #2C2C2C;*/
	background-color: #000000;
	display: block;
	height: 60px;
	line-height: 60px;
	padding: 0% 5% 0% 5%;
	width: 90%;
}
header {
	box-shadow: 0px 0px 2px #000;
	position: fixed;
	top: 0%;
	z-index: 2;
}
#Hero {
	background: url(images/background_web.jpg) no-repeat 50%;
	background-size: cover;
	display: block;
	height: 400px;
	margin-top: 60px;
	width: 100%;
}
#Status {
	background: #008800;
}
#Content {
	background: #FFF4E6;
	display: inline-block;
	padding: 5%;
	width: 90%;
}
#MenuCard {
	background: url(images/background-menu.jpg) fixed center no-repeat;
	background-size: cover;
	display: inline-block;
	min-height: 10%;
	padding: 5%;
	width: 90%;
}
#Offer {
	background: #FFB300;
}
#feedback {
	/*background: #552800;*/
	background: #292929;
	display: inline-block;
	padding: 5%;
	width: 90%;
}
#Contact {
	background: #FFF4E6;
}





/***    C O N T E N T    ***/

#Contact {
	height: 400px;
}

#Navigation {
	background-color: #000000;
	display:none;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 60px;
	width: 250px;
	z-index: 900;
}
#Navigation li {
	list-style: none;
}
#Navigation li:hover { background-color: #292929; }
#Navigation li a {
	display: block;
	padding: 0% 5%;
	width: 90%;
}

#sitemenu, #phonenumber, #sitetitle {
	display: block;
	float: left;
	line-height: 60px;
	height: 60px;
	width: 33%;
}
#sitemenu, #phonenumber {
	float: right;
	margin-left: 5%;
	width: auto;
}
#Status.closed { background: #CC0000; }


footer a {
		display:block; 
		float: right;
}


.button {
	background: #000000;
	display: block;
	padding: 0px 10px 0px 10px;
	height: 60px;
}
.button:hover { cursor: pointer; }

.google-maps {
	height: 400px;
	padding: 0%;
	margin: 0%;
	width: 100%;
}

.diner:hover { background: #FBF0E2; }
.dine-num, .dine, .dine-price {
	border-bottom: 1px dotted #000;
	padding: 1%;
}
.dine span {
	display: block;
	padding-top: 1%;
}
.dine-cat {
	padding: 60px 1% 0% 0%;
}
.diner-table {
	max-width: 80%;
	margin: 0% 10%;
}

.Hero-Diner {
	background: url(images/hero/speisekarte_pizza.jpg) no-repeat 50% !important;
	background-size: cover !important;
	line-height: 250px;
	max-height: 250px;
}

.icon-menu {
	margin: 0px 0px -4px 7px;
	width: 24px;
}
.icon-pointer {
	margin: 0px 10px -7px 0px;
	width: 32px;
}

.layer-blank {
	background: #4b3832;
	display: block;
	height: 1%;
	width: 100%;
}

.phone {
	background: url(images/icons/phone.png) no-repeat center #008800;
	background-size: 32px;
	border-radius: none;
	display: block;
	height: 60px;
	width: 60px;
}

.no-mobile { display: inherit; }
.only-mobile { display: none; }




ul.contact h2, ul.contact h3, iframe  {
	margin: 0%;
	padding: 0%;
}
ul.contact {
	display: inline-block;
	margin: 0%;
	max-height: 400px;
	padding: 0%;
	width: 100%;
}
ul.contact li {
	display: inline-block;
	float: left;
	list-style: none;
	padding: 5%;
	width: 23.33%;
}
ul.contact li.gmaps {
	max-height: 400px;
	padding: 0%;
	width: 33.33%;
}

ul.shopTimes {
	display: inline-block;
	margin: 0%;
	padding: 0%;
	width: 100%;
}
ul.shopTimes li {
	float: left;
	list-style: none;
	padding: 0%;
	width: 50%;
}
ul.shopTimes li.time { float: right; }

ul.socials {
	display: inline-block;
	margin: 0% 25% 0% 25%;
	padding: 0%;
	width: 15%;
}
ul.socials li {
	float: left;
	list-style: none;
	margin: 3%;
	padding: 0%;
	width: 19% !important;
}
ul.socials li img {
	border-radius: 12%;
	width: 100%;
}
ul.socials li img:hover { box-shadow: 0px 0px 3px #000; }




/***    F O R M A T T I N G    ***/

a { text-decoration: none; }
#Contact a { text-decoration: underline; }

#Status, #MenuCard h2, #Offer, #feedback, .Hero-Diner { text-align: center; }

.dine span { font-style: italic; }

body { font-family: 'Open Sans', sans-serif; }

body { font-size: 14pt; }
.Hero-Diner h1 { font-size: 28pt !important; }
h1  { font-size: 20pt; }
#Status, h2, #Contact h3 { font-size: 18pt; }
h3 { font-size: 16pt; }
.dine span, .dine-cat span { font-size: 12pt; }
footer, .dine sup, .smallfont { font-size: 10pt }

#sitetitle, #Status, .button  { font-weight: 700; }

body, #Contact a { color: #3c2f2f; } /* Text normal */
header, #Status, #MenuCard h2, #feedback, footer, a, .Hero-Diner { color: #FFF4E6; }
header a:hover, .button:hover { color: #FFB300; } /* gelb */
#sitetitle a, a:hover { color: #FFEDBE; } /* besch */
#Offer { color: #000000; }




/*   E F F E C T S  */



@media all and (max-width: 1050px) {
	
	
	#Contact { height: auto !important; }
	.google-maps {
		height: 350px;
	}
			
	
	ul.contact { max-height: none; }		
	ul.contact li {
		display: inline-block;
		float: left;
		list-style: none;
		padding: 5%;
		width: 40%;
	}
	ul.contact li.gmaps {
		max-height: 350px;
		padding: 0%;
		width: 100%;
	}
	
	ul.socials {
		display: inline-block;
		margin: 0%;
		padding: 0%;
		width: 40%;
	}
	
	ul.shopTimes li {
		float: left;
		list-style: none;
		padding: 0%;
		width: 50%;
	}


}



@media all and (max-width: 900px) {
	
	
	#Hero {
		height: 300px;
	}
	
	#MenuCard {
		background-size: cover;
		display: inline-block;
		padding: 5% 0%;
		width: 100%;
	}
	
	#Navigation {
		left: 0px;
		height: 95%;
		overflow: scroll;
		position: fixed;
		width: 100%;
	}
	#Navigation li {
		list-style: none;
		height: 60px;
	}
	#Navigation li:hover { background-color: #292929; }
	#Navigation li a {
		display: block;
		padding: 0% 5%;
		width: 90%;
	}

	#Offer {
		height: auto;
		line-height: 18pt;
		padding: 5% 10% 5% 10%;
		width: 80%;
	}
	
	#sitemenu {
		float: left;
		padding: 0px;
		margin: 0px 20px 0px 0px;
		width: 40px;
	}
	#sitetitle {
		float: left;
		width: auto;
	}
	
	
	.button {
		background: url(images/icons/menu.png) no-repeat center #000000;
		background-size: 29px;
		display: block;
		height: 40px;
		margin: 10px 0px;
		padding: 0px;
		width: 40px;
	}
	
	.google-maps {
		height: 350px;
	}
		
	.no-mobile { display: none; }
	.only-mobile { display: block; }
	
	.icon-pointer {
		display: block;
		margin: 0% 46% 5% 46%;
		transform: rotate(90deg);
		width: 8%
	}
	
	.dine-num, .dine, .dine-price {
		border-bottom: 1px solid #000;
		padding: 1%;
	}
	.diner-table {
		max-width: 90%;
		margin: 0% 5%;
	}
	
	ul.contact li {
		display: inline-block;
		float: left;
		list-style: none;
		padding: 5%;
		width: 40%;
	}
	ul.contact li.gmaps {
		max-height: 350px !important;
		padding: 0%;
		width: 100%;
	}
	
	ul.socials {
		display: inline-block;
		margin: 0%;
		padding: 0%;
		width: 40%;
	}
	
	ul.shopTimes li {
		float: left;
		list-style: none;
		padding: 0%;
		width: 50%;
	}
	
	
	body { font-size: 12pt; }
	h1, #MenuCard h2  { font-size: 18pt; }
	#Status, h2, #Offer { font-size: 16pt; }
	#Contact h2, #Contact h3, h3 { font-size: 14pt; }
	#sitetitle, #sitemenu, #phonenumber{ font-size: 12pt; }
	footer { font-size: 10pt }
	

}



@media all and (max-width: 700px) {
	
	
	footer { height: auto; }
	footer a {
		display: block;
		height: 60px;
		width: 100%;
	}
	
	
	#Hero {
		height: 250px;
	}
	#MenuCard {
		background: url(images/background-menu.jpg) fixed center;
		background-size: auto;
		display: inline-block;
		padding: 0%;
		width: 100%;
	}
	
	#Offer {
		height: auto;
		line-height: 18pt;
		padding: 5% 10% 5% 10%;
		width: 80%;
	}	
	
		
	.google-maps {
		height: 250px;
	}
			
	.icon-pointer {
		display: block;
		margin: 0% 42% 5% 42%;
		transform: rotate(90deg);
		width: 16%
	}
	
	.diner-table {
		max-width: 100%;
		margin: 0% 0%;
	}

	.Hero-Diner {
		background: url(images/hero/speisekarte_pizza.jpg) no-repeat 50% !important;
		background-size: cover !important;
		line-height: 150px;
		max-height: 150px;
	}
	
	
	ul.contact li {
		display: inline-block;
		float: none;
		list-style: none;
		padding: 5%;
		width: 90%;
	}
	ul.contact li.gmaps {
		max-height: 250px !important;
		padding: 0%;
		width: 100%;
	}
	
	ul.socials {
		display: inline-block;
		margin: 0%;
		padding: 0%;
		width: 90%;
	}
	
	ul.shopTimes li {
		float: left;
		list-style: none;
		padding: 0%;
		width: 50%;
	}
	
	
	body { font-size: 12pt; }
	.Hero-Diner h1  { font-size: 22pt !important; }
	h1, #MenuCard h2  { font-size: 18pt; }
	h2 { font-size: 16pt; }
	#sitetitle a { font-size: 10pt; }
	#Status, #Offer, #Contact h2, #Contact h3, h3 { font-size: 14pt; }
	#sitetitle, #sitemenu, #phonenumber { font-size: 12pt; }
	footer, .dine span, .dine-cat span { font-size: 10pt }
	


}