@charset "UTF-8";
* {
	margin: 0 auto;
}
body {
	background: white;
	margin: 0 auto;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	height: 1700px;
	color: #333;
	line-height:1.4em;
}
body#startseite {
	height: 550px;
}
body#startseite #modelle {height: 550px!important;}

a:hover {
	text-decoration: none;
}
#produktpalette, #geschichtekiosk, #kioskgraben, #kioskstegen, #berkelgeschichte, #design, #uebermich, #showroom, #modelle, #garantie, #tipps, #schwein {
	height: 1000px;
	width: 980px;
	margin-bottom: 1px;
}
#portrait {
	height: 1080px;
	width: 980px;
	margin-bottom: 1px;
}
#home {
	width: 980px;
	margin-bottom: 1px;
}
a {
	color: #ccc;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	color: #fff;
	font-size: 2.5em;
	line-height: 1.1em;
}
h2 {
	font-size: 1.2em;
	color: #bb9b77;
	margin: 10px 0 5px 0;
	line-height: 1.1em;
}
#menu1 {
	height: 30px;
	width: 980px;
	background: #000;
	margin: 0;
	color: #fff;
}
#menu1 p {
	margin-right: 5%;
	font-size: 0.9em;
	padding-top: 5px;
	text-align: right;
}
#menu1 a {
	color: #fff;
	text-decoration: none;
	padding: 0 8px;
}

#menu1 a.typischtoni {color:#666}
#menu1 a.berkel {color:#666}
#menu1 a:hover {
	color: #ccc;
}
#menu2 {
	height: 30px;
	width: 100%;
	background: #000;
	margin: 0;
}
#menu2 ul {
	list-style: none;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
}
#menu2 ul li {
	display: inline-block;
	margin: 0;
	padding: 0 10px;
}
#menu2 ul li a {
	color: #fff;
}
#menu2 ul li a:hover {
	color: #C30;
	text-decoration: underline;
}
#portraitmenu ul li a.portrait, #produktpalettemenu li a.produktpalette, #schweinmenu li a.schwein, #geschichtekioskmenu li a.geschichtekiosk, #kioskgrabenmenu li a.kioskgraben, #kioskstegenmenu li a.kioskstegen,  #berkelgeschichte li a.berkelgeschichte, #design li a.design, #uebermich li a.uebermich, #showroom li a.showroom, #modelle li a.modelle, #garantie li a.garantie, #tipps li a.tipps {
	color: #C30;
}
#restauratorlogo {position: absolute;
margin: -25px 0 0 50px;
padding: 0;
z-index: 9999;}
#restauratorlogo img {width: 80px;
margin-bottom: -25px;}
#restauratorlogo h3 {font-family: 'Dancing Script', cursive;
	color: #999;
	font-size: 1.5em;
	font-weight: normal;}
#inhalt {
	height: 380px;
	width: 980px;
}
#inhalt ul {
}
#inhalt li.links {
}
#inhalt li.rechts {
}
#adresse p {
	color: #666;
	font-size: 0.9em;
	text-align: center;
}
#adresse a {
	color: #666;}
#slideshow, #slideshow2, #slideshow3, #slideshow4, #slideshow5, #slideshow6, #slideshow7, #slideshow8 {
	z-index: 1;
	position: absolute;
	width: 980px;
	height: 320px;
	margin: 0;
}
#slideshow > div, #slideshow2 > div, #slideshow3 > div, #slideshow4 > div, #slideshow5 > div, #slideshow6 > div, #slideshow7 > div, #slideshow8 > div {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#slider {
	height: 320px;
	width: 100%;
	background: #000;
	margin: 0;
	z-index: 1;
}
#slider img {
	width: 980px;
	height: 320px;
}
#deco {
	width: 980px;
	height: 320px;
	position: absolute;
	z-index: 999;
}
#deco img {
	width: 980px;
	height: 320px;
}
#titel {
	position: absolute;
	position: absolute;
	z-index: 9999;
	margin: 8% auto auto 8%;
}
#titel h1 {
	font-family: 'Dancing Script', cursive;
	color: #bb9b77;
	font-size: 4em;
	font-weight: normal;
}
#titel h2 {
	font-family: 'Dancing Script', cursive;
	color: #fff;
	font-size: 1.8em;
	font-weight: normal;
}
#titel img { width:118px; }
#titel p { text-align:right; width: 760px;}
#inhalt {
}
/*home*/

ul#startseite {
	width: 100%;
	margin: 10px 5% 80px 5%;
	padding: 0;
}
ul#startseite li {
	width: 45%;
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align:top;
}
ul#startseite li img {
	width: 28%;
	height: 28%;
	margin: 0 25%
}
ul#startseite li p {
	text-align: center;
	margin: 20px 0;
}
ul#startseite li a {
	color: #000;
	text-decoration: none;
}
ul#startseite li a:hover {
	color: #888;
	text-decoration: none;
}
ul#startseite li span.handschrift {
	font-family: 'Dancing Script', cursive;
	color: #999;
	font-size: 1.6em;
line-height: 1.1em;

}
ul#startseite li span.handschrift a {
	color: #888;
	text-decoration: none;
}
ul#startseite li p a:hover span.handschrift {
	color: #444;
	text-decoration: none;
}
/*typisch-toni*/

ul#portrait {
	width: 100%;
	margin: 10px 0 0 1%;
	padding: 0;
}
ul#portrait li {
	
	display: inline-block;
	padding: 0;
	list-style: none;

	vertical-align: top;
}
ul#portrait li.bild {width: 14%;	margin: 1% 1% 0 1%; }
ul#portrait li.text {width: 80%; margin:0;}

ul#portrait li img {
	width: 96%;
	height: 96%;
	margin: 0 2%
}
ul#links {
	width: 340px;
	margin: 20px 0 0 30px;
	padding: 0;
	position: absolute;
}
ul#links li {
	width: 160px;
	height: 120px;
	margin: 3px 2px 0 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}
ul#links li img {
	width: 160px;
	height: 120px;
	margin: 0;
}
ul#linksprodukte {
	width: 550px;
	margin: 20px 0 0 30px;
	padding: 0;
	position: absolute;
}
ul#linksprodukte li {
	width: 120px;
	height: 80px;
	margin: 3px 2px 0 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}
ul#linksprodukte li img {
	width: 120px;
	height: 80px;
	margin: 0;
}

#linksberkel {width:300px;margin: 35px 0 0 30px;padding: 0;
	position: absolute;}
#linksberkel img {width:300px;}	

#rechts {
	margin: 20px 5% auto 400px;
}
#rechtsprodukte {
	margin: 20px 2% auto 550px;
}
#rechtsprodukte p {
	padding-bottom: 5px;
}
#rechtsberkel {margin: 20px 5% auto 400px;}

#rechts h2, #rechtsprodukte h2, #rechtsberkel h2 {
	font-family: 'Dancing Script', cursive;
	color: #C30;
	font-size: 2.8em;
	font-weight: normal;
	line-height: 1.1em;
}
/*impressum*/

.impr p {
	margin-top: 0px;
	font-size: 0.6em;
	color: #83818b;
	margin-right: 10px;
	margin-left: 0px
}
#adressefix, #adressefixberkel {
	position: fixed;
	bottom: 0;
	background: #555;
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
	z-index: 999999;
}
#adressefix {	height: 70px;}
#adressefixberkel {	height: 30px; padding-top:3px;}
#adressefix img {
	margin: 8px 0 -8px 0;
}
#adressefix a, #adressefixberkel a {color:#fff;}


/*popup*/
.reveal-modal img { height:700px; margin-right:40px;}
.reveal-modal td {text-align:left;}

a.big-link {color:#9a3f8f; font-size:0.6em}

	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100000;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -490px;
		width: 980px;
/*		background: #fff url(modal-gloss.png) no-repeat -200px -80px;*/
		position: absolute;
		z-index: 101000;
		padding: 30px 40px 34px;
	/*	-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);*/
		}
		
	/*.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 700px; margin-left: -390px;}
	.reveal-modal.large 		{ width: 700px; margin-left: -390px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}*/
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 30px;
		right: 11px;
		color: #c30;
		cursor: pointer;
		} 
.reveal-modal a:hover {text-decoration:none; color: #ccc;}
/*end popup*/

#rechtsberkel h3 { text-align:right;}
#rechtsberkel h3 a {color:#c30; text-decoration:none;} 
#rechtsberkel h3 a:hover {color:#666;}

#berkelmodell {margin-top:30px;}
ul#modellbilder { display:inline-block; margin:0; padding:0;}	
ul#modellbilder li { display:inline-block; list-style:none; margin:0; padding:0; text-align:center; vertical-align:top;}	
ul#modellbilder li.modell {width:160px;margin-top: -10px;}
ul#modellbilder li.modell h3 {color:#C30;}
ul#modellbilder li.modell h4 {color:#bb9b77;}
ul#modellbilder li.modell p {font-size:0.8em;line-height: 1.4em;}
ul#modellbilder li.modell img {height:120px;}
ul#modellbilder li.modellA a.big-link img, ul#modellbilder li.modellB a.big-link img, ul#modellbilder li.modellC a.big-link img { height:230px;}

ul#modelle {width:980px; display:inline-block; margin:0; padding:0; max-height:240px;}
ul#modelle li { display:inline-block; list-style:none; margin:20px 0 0 0; padding:0 3px; text-align:center; vertical-align:top; }
ul#modelle li img {height:120px;}
ul#modelle li h5 { text-transform:uppercase; margin-top:0px;}
ul#modelle li h3 {color:#C30; text-transform:uppercase;}
ul#modelle li a {text-decoration:none;}

.prod {list-style:disc; padding:0 0 0 12px; margin:0;}
.berk ul {
    margin-left: 200px !important;}
.berk ul li{	padding: 0 15px !important;}

.waagen {margin-top:120px!important;}
img.modellp {height: 80px!important; margin-top:20px!important; margin-bottom:20px!important;}


@media (max-width: 720px) {
	
	#home, #produktpalette, #geschichtekiosk, #kioskgraben, #kioskstegen, #berkelgeschichte, #design, #uebermich, #showroom, #modelle, #garantie, #tipps, #portrait {
		width:700px;
		height: 1150px;}
	#menu1 {
	width: 700px;}	
		
	#slideshow, #slideshow2, #slideshow3, #slideshow4, #slideshow5, #slideshow6, #slideshow7 {
	width: 700px;
	height: 230px;
}
#inhalt {
	height: 480px;
	width: 700px;
	margin-top:40px;
}
	#slider {
	height: 230px;
	
}
#slider img {
	width: 700px;
	height: 230px;
}
#deco {
	width: 700px;
	height: 230px;
	
}
#deco img {
	width: 700px;
	height: 230px;
}
#restauratorlogo {
margin: 5px 0 0 50px;}	

ul#modelle {width:700px;}
ul#modellbilder li.modell img {height:100px;}

.waagen {margin-top:100px!important;}
img.modellp {height: 50px!important; margin-top:20px!important; margin-bottom:30px!important;}

#linksberkel, #rechtsberkel {margin-top:50px;}


ul#linksprodukte {width:450px;
}
#rechtsprodukte {
    margin: 20px 2% auto 450px;
}
ul#portrait li.bild {width: 0%; display:none;}
ul#portrait li.text {
    width: 95%;}
#menu2 {
    height: 45px;
}
#menu2 ul li {
    display: inline-block;
    margin: 0;
    padding: 0 15px;
}
.berk ul {
    margin-left: 0px !important;}
.berk ul li{	padding: 0 10px !important;}
#titel p { text-align:right; width: 560px;}

ul#modelle li h3, ul#modelle li h5 {
    font-size: 0.9em;
    margin: 0;
    padding: 0;
    line-height: 1.1em;
	}
}
	
@media (min-width: 1400px) {
	body {
	font-size: 16px;
	line-height:1.5em;
}
	#home {width:1400px;
		height: 800px;}
		
		#home #inhalt {height:400px;}
	#produktpalette, #geschichtekiosk, #schwein, #kioskgraben, #kioskstegen, #berkelgeschichte, #design, #uebermich, #showroom, #modelle, #garantie, #tipps, #portrait {
		width:1400px;
		height: 1600px;}
	#menu1 {
	width: 1400px;}	
		
	#slideshow, #slideshow2, #slideshow3, #slideshow4, #slideshow5, #slideshow6, #slideshow7, #slideshow8 {
	width: 1400px;
	height: 460px;
}
#inhalt {
	height: 480px;
	width: 1400px;
	margin-top:40px;
}
	#slider {
	height: 460px;
	
}
#slider img {
	width: 1400px;
	height: 460px;
}
#deco {
	width: 1400px;
	height: 460px;
	
}
#deco img {
	width: 1400px;
	height: 460px;
}
#titel p { text-align:right; width: 1120px;}
#restauratorlogo {
margin: -22px 0 0 50px;}	
#restauratorlogo img {
    width: 90px;}

ul#modelle {width:1400px;}
ul#modellbilder li.modell {width:260px}
ul#modellbilder li.modell img {height:180px;}
ul#modellbilder li.modellA a.big-link img, ul#modellbilder li.modellB a.big-link img, ul#modellbilder li.modellC a.big-link img { height:320px;}

ul#modelle li img {
    height: 150px;
}
.waagen {margin-top:150px!important;}
img.modellp {height: 100px!important; margin-top:20px!important; margin-bottom:30px!important}

ul#modelle li {
    padding: 0 8px;}

#linksberkel, #rechtsberkel {margin-top:50px;}


#rechts h2, #rechtsprodukte h2, #rechtsberkel h2{font-size: 3.5em;}
#adresse {height:40px;}
ul#links {
    width: 420px;}
ul#links li {
    width: 202px;
    height: 150px;
	}	
ul#links li img {
    width: 200px;
    height: 150px;
	}	
#rechts {
    margin: 10px 5% auto 480px;
}
#titel img {
    width: 150px;
    margin-left: 87%;
}	
ul#linksprodukte {
    width: 600px;}
	ul#linksprodukte li {
    width: 162px;
    height: 100px;}

ul#linksprodukte li img {
    width: 160px;
    height: 100px;}
.berk ul li{	padding: 0 25px !important;}	
ul#modellbilder li.modell p {
    font-size: 0.9em;
}
#linksberkel img {
    width: 330px;
}

}


@media (max-width: 340px) {
	
	#home {width:320px;height:500px}
	#portrait
	{width:320px;
		height: 1400px;}
	#produktpalette, #geschichtekiosk, #schwein, #kioskgraben, #kioskstegen, #berkelgeschichte, #design, #uebermich, #showroom, #modelle, #garantie, #tipps  {
		width:320px;
		height: 900px;}
	#menu1 {
	width: 320px;}	
		
	#slideshow, #slideshow2, #slideshow3, #slideshow4, #slideshow5, #slideshow6, #slideshow7, #slideshow8 {
	width: 320px;
	height: 104px;
}
#inhalt {
	height: 600px;
	width: 320px;
	margin-top:40px;
}
	#slider {
	height: 120px;
	
}
#slider img {
	width: 320px;
	height: 104px;
}
#deco {
	width: 320px;
	height: 104px;
	
}
#deco img {
	width: 320px;
	height: 104px;
}
#restauratorlogo {
margin: -15px 0 0 20px;}	
#restauratorlogo h3 {font-size:1.1em;}
#restauratorlogo img {width: 60px;}

ul#modelle {width:320px;}
ul#modellbilder li.modell img {height:100px;}
ul#modelle li img {
    height: 80px;
}
ul#modellbilder li.modellB a.big-link img, ul#modellbilder li.modellC a.big-link img {
    width: 300px;}
ul#modellbilder { display:block; }	
ul#modellbilder li { display:block; }	
ul#modellbilder li.modell {width:300px}
#berkelmodell {
    width:300px;
}

#linksberkel, #rechtsberkel {margin:50px 0 0 0; position:relative!important;}
#rechtsberkel {margin: 20px 0 auto 0; width:300px;}
#linksberkel img {
    width: 320px;
}

#menu2 {
    height: 60px;}

#myModal01, .reveal-modal {
		display:none; visibility:hidden; width:300px; margin:0; padding:0;	}
		.reveal-modal a:hover, a.big-link {cursor:pointer;}
ul#modellbilder li.modell p {margin-bottom:10px;}


ul#startseite li span.handschrift {
    font-size: 1.2em; line-height:1em;}
	
	#home #inhalt {
    height: 340px;

    margin-top: 0px;
}
#home #menu2 {
    height: 25px;
}

#titel h1 {
    font-size: 2.4em;
}
#titel h2 {
    font-size: 1.4em;
}
#titel img { width:70px; margin-left:70%;}
	
ul#linksprodukte {width:300px; margin:0; position:relative;
}
ul#linksprodukte li img {
    width: 90px;
    height: 60px;}
	ul#linksprodukte li {
    width: 90px;
    height: 60px;}
#linksprodukte, #rechtsprodukte {
    margin: 20px 2% auto 0px; position:relative;
}
ul#links {margin:0; position:relative; width:320px;}
#rechts {position:relative; margin:0;}
ul#links li {
    width: 120px;
    height: 90px;}
ul#links li img {
    width: 120px;
    height: 90px;}

ul#portrait li.bild {width: 0%; display:none;}
ul#portrait li.text {
    width: 95%;}
#adressefix {	height: 100px;}
#adressefixberkel {	height: 50px;}
#menu2 ul li {
	padding: 0 4px;
}
#titel p { text-align:right; width: 260px;}

	}