@font-face {
    font-family: 'Snickles';
    src: url('snickles-webfont.eot');
    src: url('snickles-webfont-.eot#iefix') format('embedded-opentype'),
         url('snickles-webfont.woff') format('woff'),
         url('snickles-webfont.ttf') format('truetype'),
         url('snickles-webfont.svg#snicklesregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
    padding: 0;
    background-color: #2f3237;
    min-width: 1200px;
}

a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:focus { color:#ffffff; text-decoration:underline; }
a:hover { color:#ffffff; text-decoration:underline; }
a:active { color:#ffffff text-decoration:underline; }

/* Ganzes DIV klickbar machen */
a.klick {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 100%;
}

@media (max-height: 876px) {
	.hellmanns_garage {
		top: 100px;
		left: 35%;
		width: 617px;
		height: 776px;
		margin-left: -700px;
		background-image: url("pic1.png");
		background-repeat: no-repeat;
		position: fixed;
		z-index: 2000;
	}
}

@media (min-height: 877px) {
	.hellmanns_garage {
		bottom: -75px;
		left: 35%;
		width: 617px;
		height: 776px;
		margin-left: -700px;
		background-image: url("pic1.png");
		background-repeat: no-repeat;
		position: fixed;
		z-index: 2000;
	}
}



/********** MENU **********/
.blank {
	width: 1200px;
	height: 195px;
	z-index: 1;
}

.menu {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	position: relative;
}

.menu_links {
	top: 157px;
	/* left: 217px; */
	left: 50%;
	margin-left: -315px;
	position: fixed;
	z-index: 3000;
	font-family: 'Roboto Slab', serif;
	font-size: 18px;
	line-height: 18px;
}

.menu_rechts {
	top: 157px;
	/* left: 725px; */
	left: 50%;
	margin-left: 125px;
	position: fixed;
	z-index: 3000;
	font-family: 'Roboto Slab', serif;
	font-size: 18px;
	line-height: 18px;
}

/* Ganze Breite */
.menu_container {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 245px;
	background-image: url("menu_bg.png");
	background-repeat: no-repeat;
	background-position: 50% 0px;
	position: fixed;
	z-index: 1000;
	color: #ffffff;
	font-family: 'Roboto Slab', serif;
	font-size: 18px;
	line-height: 18px;
	}

#logo {
	background-image:url("logo.png");
	background-repeat:no-repeat;
	width: 150px;
	height: 190px;
	margin: 0px;
	padding: 0px;
	left: 50%;
	margin-left: -77px;
	top: 25px;
	position: fixed;
	z-index: 1001;
}



/********** STARTSEITE **********/

.start {
	color: #ffffff;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	line-height: 23px;
	padding-top: 570px;
}
.teaser_container .start {
	color: #2F3237;
	padding-top: 450px;
}


.start_container {
	background-color: #2f3237;
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	position: relative;
}

#knaller {
	background-image:url("knaller.png");
	width: 218px;
	height: 213px;
	margin: 0px;
	padding: 0px;
	left: 764px;
	top: 5px;
	position: absolute;
	z-index: 100;
}

#rinde {
	background-image:url("rinde.png");
	width: 799px;
	height: 403px;
	margin: 0px;
	padding: 0px;
	left: 200px;
	top: 100px;
	position: absolute;
	z-index: 99;
}

.start_medium { 
	font-family: 'Roboto Slab', serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: bold;
}

.start_large { 
	font-family: 'Roboto Slab', serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: bold;
}

/********** TEASER **********/

.teaser {
	/* background-image:url("grau.png"); */
	text-align: center;
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	width: 613px;
	height: 378px;
	left: 294px;
	top: 70px;
	position: absolute;
	font-family: 'Roboto Slab', serif;
	font-size: 60px;
	line-height: 68px;
	font-weight: bold;
	color: #ffffff;
}

.teaser_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	height: 613px;
	position: relative;
}

.teaser_wrapper {
	background-image: url("wildezeiten.jpg");
	background-position: 50% 0px;
	background-repeat:no-repeat;
	position: relative;
}

.teaser_dreieck {
	background-image:url("dreieck_grau.png");
	margin: 0px;
	padding: 0px;
	width: 66px;
	height: 28px;
	left: 567px;
	top: 0px;
	position: absolute;
}

.teaser_dreieck_unten {
	background-image:url("dreieck_teaser.png");
	background-position: 50% 0px;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 24px;
	left: 0px;
	bottom: 0px;
	position: absolute;
}

.prozent {
	width: 50%;
	text-align: right;
	font-size: 90px;
	font-weight: bold;
	color: #ffffff;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.rechts {
	width: 50%;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	color: #ffffff;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.teaser_medium {
	font-size: 30px;
	font-weight: bold;
	line-height: 38px;
}

.teaser_small {
	font-size: 22px;
	font-weight: normal;
	line-height: 30px;
}

/********** MITTAGSKARTE **********/

.mittagskarte {
	color: #ffffff;
	text-align: left;
	font-family: 'Roboto Slab', serif;
	font-size: 16px;
	line-height: 24px;
	padding-top: 230px;
	padding-left: 225px;
}

.mittagskarte_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	background-color: #ff4f45;
	position: relative;
	margin-bottom: -1px;
	margin-top: -1px;
}

.mittagskarte_wrapper {
	width: 100%;
	background-color: #61010e;
	background-image: url("mittagskarte.jpg");
	background-position: 50% 0px;
	background-repeat:no-repeat;
	position: relative;
}

#titel {
	background-image:url("mittagskarte.png");
	width: 333px;
	height: 59px;
	margin: 0px;
	padding: 0px;
	left: 434px;
	top: 100px;
	position: absolute;
}

#pdf {
	background-image:url("pdf.png");
	width: 123px;
	height: 63px;
	margin: 0px;
	padding: 0px;
	left: 817px;
	top: 100px;
	position: absolute;
}

#gueltig {
	text-align: center;
	font-size: 12px;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	top: 180px;
	position: absolute;
	width: 100%;
}

.tage {
	font-family: 'Snickles', serif;
	font-size: 60px;
	text-align: center;
	width: 160px;
	color: #ffffff;
	vertical-align: top;
}

.gerichte {
	font-family: 'Roboto Slab', serif;
	font-size: 16px;
	text-align: center;
	color: #ffffff;
	width: 160px;
	vertical-align: top;
}

.mittagskarte_dreieck {
	background-image:url("beef_dreieck.png");
	margin: 0px;
	padding: 0px;
	width: 1200px;
	height: 29px;
	left: 0px;
	top: 0px;
	position: absolute;
}

/********** ANGEBOTE **********/

.angebote {
	position: absolute;
	background-image:url('schild.png');
	height: 810;
	width: 988;
	left: 213px;
	top: 0px;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 30px;
	line-height: 38px;
}

.angebote_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	height: 910px;
	position: relative;
}

.angebote_wrapper {
	width: 100%;
	background-color: #61010e;
	background-image: url("angebote.jpg");
	background-position: 50% 0px;
	background-repeat:no-repeat;
	position: relative;
}
}

#knaller2 {
	background-image:url("knaller.png");
	width: 164px;
	height: 162px;
	margin: 0px;
	padding: 0px;
	left: 660px;
	top: 86px;
	position: absolute;	
}

#angebot_knaller {
	background-image:url("angebot_title.png");
	background-repeat:no-repeat;
	color: #D6001E;
	width: 388px;
	height: 185px;
	margin: 0px;
	padding: 0px;
	left: 240px;
	top: 50px;
	position: absolute;	
	text-align: right;
	font-size: 30px;
}

.angebot_large {
	font-size: 72px;
	line-height: 72px;
	font-family: 'Snickles', serif;
	-webkit-transform: rotate(350deg);
	-moz-transform: rotate(350deg);
	-o-transform: rotate(350deg);
	writing-mode: lr-tb;
	white-space: nowrap;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.98480775, M12=0.17364818, M21=-0.17364818, M22=0.98480775,sizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.98480775, M12=0.17364818, M21=-0.17364818, M22=0.98480775,sizingMethod='auto expand');
	-ms-transform: rotate(-10deg);
}

.angebot_medium {
	font-size: 42px;
	line-height: 42px;
	font-family: 'Snickles', serif;
	/* text-align: center; */
	-webkit-transform: rotate(350deg);
	-moz-transform: rotate(350deg);
	-o-transform: rotate(350deg);
	writing-mode: lr-tb;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.98480775, M12=0.17364818, M21=-0.17364818, M22=0.98480775,sizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.98480775, M12=0.17364818, M21=-0.17364818, M22=0.98480775,sizingMethod='auto expand');
	-ms-transform: rotate(-10deg);
}

.preis {
	font-size: 60px;
	line-height: 60px;
	font-weight: bold;
}

.details {
	font-size: 15px;
	line-height: 20px;
}

.details_large {
	font-size: 15px;
	line-height: 20px;
}

.preis_medium {
	font-size: 40px;
	line-height: 40px;
	font-weight: bold;
}

.gewicht {
	font-weight: bold;
}

#angebot1 {
	color: #6D0115;
	width: 350px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 80px;
	top: 275px;
	position: absolute;	
	text-align: left;
	font-size: 18px;
	text-align:center;
}

#angebot2 {
	color: #6D0115;
	width: 350px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 490px;
	top: 275px;
	position: absolute;	
	text-align: left;
	font-size: 18px;
	text-align:center;
}
#angebote ul{
	text-align:left;
}

#termin_abmachen{
	left: 445px;
    position: absolute;
    top: 795px;;
}

#angebot3 {
	color: #ff4f45;
	width: 250px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 670px;
	top: 320px;
	position: absolute;	
	text-align: left;
	font-size: 25px;
}

#angebot4 {
	color: #ff4f45;
	width: 250px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 70px;
	top: 560px;
	position: absolute;	
	text-align: left;
	font-size: 25px;
}

#angebot5 {
	color: #ff4f45;
	width: 250px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 360px;
	top: 490px;
	position: absolute;	
	text-align: left;
	font-size: 25px;
}

#angebot7 {
	color: #ff4f45;
	width: 250px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 490px;
	top: 540px;
	position: absolute;	
	text-align: left;
	font-size: 25px;
}

#angebot6 {
	color: #ff4f45;
	width: 250px;
	height: 150px;
	margin: 0px;
	padding: 0px;
	left: 700px;
	top: 520px;
	position: absolute;	
	text-align: left;
	font-size: 25px;
}



/********** DEAL **********/

.deal {
	color: #3c4045;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 30px;
	line-height: 38px;
	padding-top: 324px;
}

.deal_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	position: relative;
	margin-top: -1px;
}

.deal_wrapper {
	background-image: url("deal_bg.png");
    background-position: 50% 0;
    background-repeat: no-repeat;
    position: relative;
	height:744px;
}

#schwein {
	background-image:url("deal.png");
	width: 836px;
	height: 285px;
	margin: 0px;
	padding: 0px;
	left: 345px;
	top: 100px;
	position: absolute;	
}

.deal_medium { 
	font-family: 'Roboto Slab', serif;
	font-size: 60px;
	line-height: 64px;
	font-weight: bold;
}

.deal_large { 
	font-family: 'Roboto Slab', serif;
	font-size: 120px;
	color: #ff4f45;
	line-height: 128px;
	font-weight: bold;
}

.deal_hinweis { 
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	line-height: 23px;
	text-align: left;
	left: 345px;
	margin: 0px;
	padding-top: 10px;
	position: absolute;
}

.deal_dreieck {
	background-image:url("dreieck_rot.png");
	margin: 0px;
	padding: 0px;
	width: 68px;
	height: 28px;
	left: 566px;
	top: 0px;
	position: absolute;
}

.deal_dreieck_unten {
	background-image:url("dreieck_deal.png");
	background-position: 50% 0px;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 24px;
	left: 0px;
	bottom: 0px;
	position: absolute;
}

/********** BESTELLUNG **********/

.bestellung {
	position: absolute;
	top: 100px;
	left: 227px;
	width: 835px;
	height: 560px;
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	line-height: 23px;
	background-image:url("formular.png");
	color: #ff4f45;
}

.bestellung_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	background-color: #2f3237;
	height: 1000px;
	position: relative;
		margin-top: -1px;
}
#bestellung_rechts, #bestellung_links{
	color:#ffffff;
	font-size:20px;
}
#bestellung_links{
	left: 286px;
    position: absolute;
    top: 700px;
}
#bestellung_rechts{
	left: 735px;
    position: absolute;
    top: 700px;
}

input {
   color:#691815 !important;
   font-family: 'Roboto Slab', serif;
   font-size: 15px;
   border: none;
   background-color: transparent;
   width: 260px;
   outline: none;
}

textarea {
   color:#691815 !important;
   font-family: 'Roboto Slab', serif;
   font-size: 15px;
   border: none;
   background-color: transparent;
   width: 760px;
   height: 130px;
   outline: none;
   resize: none;
   overflow: auto;
}

::-webkit-input-placeholder { 
    color: #691815;
}
:-moz-placeholder { 
    color: #691815;
    opacity:  1;
}
::-moz-placeholder { 
    color: #691815;
    opacity:  1;
}
:-ms-input-placeholder { 
    color: #691815;
}


/********** hellmanns_garage **********/
.meat {
	color: #ffffff;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	line-height: 23px;
	padding-bottom: 75px;
	margin-top: 1050px;
}

.meat_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	padding-top: 120px;
	position: relative;
}

.meat_wrapper {
	width: 100%;
	background-color: #111417;
	position: relative;
	height:2750px;
}

#maps {
	background-image:url("maps.png");
	width: 266px;
	height: 171px;
	margin-top:20px;
	padding: 0px;
	position: absolute;	
}

#mp {
	background-image:url("meat.png");
	width: 149px;
	height: 163px;
	margin: 0px;
	padding: 0px;
	left: 750px;
	bottom: 0px;
	position: absolute;	
}

.hellmanns_garage_dreieck {
	background-image:url("dreieck_hellmanns_garage.png");
	background-position: 50% 0px;
	background-repeat: no-repeat;
	padding: 0px;
	width: 100%;
	height: 37px;
	left: 0px;
	top: 0px;
	position: absolute;
}
#impressum_bild{
	background-image: url("impressum_bild.jpg");
    height: 1010px;
    left: 130px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100px;
    width: 1001px;
    z-index: 99;
}

/********** FOOTER **********/

.footer_container {
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	background-color: #2f3237;
	height: 260px;
	font-size: 14.87px;
	color: #ffffff;
	position: relative;
	font-family: 'Roboto Slab', serif;
}

.footer_small {
	font-size: 11.57px;
	color: #ffffff;
}

#zeiten {
	position: absolute;
	top: 20px;
	left: 295px; /* 255px */
}

#footer_rechts {
	position: absolute;
	top: 20px;
	left: 844px;
	font-size: 13.22px;
}

#team {
	width: 221px;
	height: 45px;
	margin: 0px;
	padding: 0px;
	background-image: url("team.png");
}

#ep {
	width: 221px;
	height: 47px;
	margin: 0px;
	padding: 0px;
	background-image: url("ep.png");
	margin-top: 3px;
}

/********** IMPRESSUM **********/

.impressum_container {
	display: none;
	background-color: #2f3237;
	text-align: left;
  	margin: 0 auto;
	width: 1200px;
	position: relative;
}

.impressum {
	color: #ffffff;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 13.22px;
	/* padding-left: 844px; */
}

.impressum_headline {
	font-size: 14.87px;
}