/******************************************************************************
 *	used fonts																  *
 ******************************************************************************/

@font-face {
	font-family: "Font1";
	src: url("/fonts/font1-light.eot");
	src: url("/fonts/font1-light.woff") format("woff"),
		 url("/fonts/font1-light.ttf") format("truetype"),
		 url("/fonts/font1-light.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Font1";
	src: url("/fonts/font1-black.eot");
	src: url("/fonts/font1-black.woff") format("woff"),
		 url("/fonts/font1-black.ttf") format("truetype"),
		 url("/fonts/font1-black.svg") format("svg");
	font-weight: bold;
	font-style: normal;
}




/******************************************************************************
 *	general settings														  *
 ******************************************************************************/

* { margin: 0; padding: 0; border: 0 none; }
body {
	width: 100%;
}
#wrapper {
	position: absolute;
	width: 100%;
	top: 0;
	min-width: 960px;
	overflow: hidden;	/* prevent sliders from introducing scrollbars */
	background: url("/img/background.jpg") top left no-repeat;
	background-size: 100% auto;
	background-color: black;
}

/* links */
a {
	color: white;
	font-family: "Font1";
	text-decoration: none;
	-webkit-transition: all 300ms ease;
	   -moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		 -o-transition: all 300ms ease;
			transition: all 300ms ease;
}
a:hover, a:active, #nav a.active {
	color: #b8e133;
}

/* image-hover-links */
a.img-hover { position: relative; display: inline-block; }
a.img-hover img {
	margin: 0; padding: 0;
	-webkit-transition: all 500ms ease;
	   -moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		 -o-transition: all 500ms ease;
			transition: all 500ms ease;
}
a.img-hover img.normal { z-index: 1; opacity: 1; }
a.img-hover img.hover { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; }
a.img-hover:hover img.hover { opacity: 1; }

.justify {
	text-align: justify;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
	     -o-hyphens: auto;
			hyphens: auto;
}
.bold { font-weight: bold; }
.very-big { font-size: 28px; line-height: 38px; }
.big { font-size: 20px; line-height: 28px; }



/******************************************************************************
 *	navigation																  *
 ******************************************************************************/

 #nav {
	list-style: none;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.6);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0.6)), color-stop(80%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,0)));
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0) 100%);
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0) 100%);
	width: 120px;
	left: 50%;
	margin: 10px 10px 10px -470px;
	position: absolute;
	top: 480px;
	padding: 10px;
}
#nav.fixed {
	position: fixed;
	top: 80px;
}


#nav li {
	display: block;
}
#nav li.separator {
	height: 5px;
	background: url("/img/navi_trenner.png") center center no-repeat;
	background-size: contain;
}
#nav a {
	font-size: 14px;
	width: 100%;
	padding: 5px 0;
	display: block;
	text-align: center;
}
/* #nav a.external:after { content: "↗"; color: #b8e133; padding-left: 8px; } */
#logo {
	position: absolute;
	width: 145px;
	height: 400px;
	top: 58px;
	left: 50%;
	margin: 10px 10px 10px -470px;
	background: url("/img/logo.png") top center no-repeat;
}
#logo a { display: block; width: 100%; height: 100%; }

#wk_logo {
	display: block;
	position: fixed;
	right: 10px; top: 10px;
	width: 40px; height: 40px;
	z-index: 5;
}
#wk_logo .normal { opacity: 0.5; }

#facebook-ribbon {
	display: block;
	position: fixed;
	left: 0; top: 0;
	width: auto; height: auto;
}
#facebook-ribbon .normal { opacity: 0.5; }






/******************************************************************************
 *	grid																	  *
 ******************************************************************************/

 .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9 {
	position: relative; margin: 10px;
}
.float1, .float2, .float3, .float4, .float5, .float6, .float7, .float8, .float9 {
	position: relative; margin: 10px; float: left;
}
.grid1, .float1 { width:  60px; }
.grid2, .float2 { width: 140px; }
.grid3, .float3 { width: 220px; }
.grid4, .float4 { width: 300px; }
.grid5, .float5 { width: 380px; }
.grid6, .float6 { width: 460px; }
.grid7, .float7 { width: 540px; }
.grid8, .float8 { width: 620px; }
.grid9, .float9 { width: 700px; }
.clear { float: none; clear: both; width: 0; height: 0; }
.push1 { margin-left:  90px; }
.push2 { margin-left: 170px; }
.push3 { margin-left: 250px; }
.push4 { margin-left: 330px; }
.push5 { margin-left: 410px; }
.push6 { margin-left: 490px; }
.push7 { margin-left: 570px; }
.push8 { margin-left: 650px; }

.first { margin-left: 0; }
.last { margin-right: 0; }
.no-vertical-margins { margin-top: 0; margin-bottom: 0; }
.no-margins { margin: 0; }

.bottom { position: absolute; bottom: 0; }

.tearline5, .tearline6, .tearline7, .tearline8, .tearline9 {
	margin: 0 0 20px; border: 0 none; padding: 0; height: 7px;
	background: url("/img/tearline.png") center center no-repeat;
}
.tearline5 { width: 380px; background-size: 380px 7px; }
.tearline6 { width: 460px; background-size: 460px 7px; }
.tearline7 { width: 540px; background-size: 540px 7px; }
.tearline8 { width: 620px; background-size: 620px 7px; }
.tearline9 { width: 700px; background-size: 700px 7px; }




/******************************************************************************
 *	general content															  *
 ******************************************************************************/

#content {
	position: relative;
	width: 720px;
	margin: 30px 0 30px -240px;
	left: 50%;
	font-family: "Font1";
	font-size: 16px;
	line-height: 1.35em;
	color: #eeeeee;
}
h1 {
	font-family: "Font1";
	font-weight: bold;
	font-size: 50px;
	line-height: 1em;
	text-transform: uppercase;
	margin-top:50px;
}
#content h2 {
	font-family: "Font1";
	font-weight: bold;
	font-size: 18px;
}
#content h1, #content .yellow {
	color: #b8e133;
}
#content p { margin-bottom: 10px; }
#content  .small { font-size: 14px; }
#content .section:nth-last-child(n+2) {
	margin-bottom: 20px;
}
#content .image-description {
	font-size: 14px;
	line-height: 1.25em;
	/*font-style:italic;*/
}
#footer { margin: 0 10px; }
#footer a { font-size: 13px; }


#der-schillerwein {
	height: 295px;
}

#der-lemberger {
	height: 295px;
}

#der-riesling {
	height: 295px;
}


/******************************************************************************
 *	Der Trieb																  *
 ******************************************************************************/

#der-trieb {
	height: 175px;
}
#bottle-link {
	position: absolute;
	top: 27px;
	left: 440px;
	width: 154px;
	height: 675px;
	background: url("/img/flasche_riesling.png") right top no-repeat;
	z-index: 6;
}
#buy-now {
	position: absolute;
	top: 160px;
	right: 90px;
	width: 1px;
	height: 132px;
	background: url("/img/jetzt_kaufen.png") left top no-repeat;
	z-index: 5;
}
#bottle-link2 {
	left: 217px;
	position: absolute;
	top: 25px;
	width: 181px;
	height: 675px;
	background: url("/img/flasche_lemberger.png") right top no-repeat;
	z-index: 4;
}
#buy-now2 {
	position: absolute;
	top: 160px;
	right: 290px;
	width: 1px;
	height: 132px;
	background: url("/img/jetzt_kaufen2.png") left top no-repeat;
	z-index: 3;
}
#bottle-link3 {
	left: 240px;
	left: 10px;
	position: absolute;
	top: 30px;
	width: 181px;
	height: 675px;
	background: url("/img/flasche_schiller.png") right top no-repeat;
	z-index: 2;
}
#buy-now3 {
	position: absolute;
	top: 160px;
	right: 500px;
	width: 1px;
	height: 132px;
	background: url("/img/jetzt_kaufen3.png") left top no-repeat;
	z-index: 1;
}

#flaschen {
	/*
	padding-right: 300px;
	margin-right: 300px;
	position: absolute; 
	right: 0;
	*/
	height:850px;
	clear:both;
}



/******************************************************************************
 *	Die Macher																  *
 ******************************************************************************/

#content #die-macher { margin-bottom: 50px; }

#winzer-wrapper {
	position: relative;
	width: 640px; left: -10px;
	margin-top: 40px;
}
#winzer {
	list-style: none;
	position: relative;
	width: 640px;
	overflow: hidden;
}
#winzer li {
	display: inline;
	float: left;
	position: relative;
	margin: 10px 0;
	width: 640px;
	vertical-align: top;
}
#winzer div {
	display: inline;
	float: left;
	position: relative;
	margin: 10px;
	width: 140px;
	vertical-align: top;
}

#winzer-wrapper a.prev, #winzer-wrapper a.next {
	position: absolute;
	top: 20px;
	z-index: 4;
	padding: 61px 20px 480px;
	cursor: pointer;
}
#winzer-wrapper a.prev img.hover, #winzer-wrapper a.next img.hover { top: 61px; left: 20px; }
#winzer-wrapper a.prev { left: -68px; }
#winzer-wrapper a.next { right: -68px; }

#winzer li div img { border: 1px solid rgba(255,255,255,0.2); width: 138px; height: 158px; display: block; }
#winzer p { margin: 0; font-size: 14px; }
#winzer p.name { margin-top: 20px; color: #b8e133; font-weight: bold; height: 22px; font-size: 16px; }
#winzer p.name.narrow { /*font-size: 15px;*/ letter-spacing: -1px; }
#winzer p.loc {  }
#winzer p.dob {  }
#winzer p.dob .year { /*color: #b8e133;*/ }
#winzer p.edu { margin-top: 8px; }
#winzer p.question { margin: 8px 0 8px; color: #b8e133; line-height: 1.25em; }
#winzer p.answer { font-size: 12px; line-height: 1.25em; }
#winzer p.loc, #winzer p.edu, #winzer p.answer {
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
	     -o-hyphens: auto;
			hyphens: auto;
}

#quotes {
	position: relative;
	width: 880px; left: -170px;
	height: 305px;
	margin: 100px 0;
	overflow: hidden;
}
#quotes .typo, #quotes .images {
	list-style: none;
	position: absolute;
	margin: 0;
	height: 305px;
	top: 0;
}
#quotes .typo {
	width: 480px; left: 0;
}
#quotes .images {
	width: 400px; right: 0;
}
#quotes .typo li, #quotes .images li {
	position: relative;
	height: 285px;
	margin: 10px;
	background-position: center center;
	background-repeat: no-repeat;
}
#quotes .typo li {
	width: 460px;
}
#quotes .images li {
	width: 380px;
}


/******************************************************************************
 *	Die Böden																  *
 ******************************************************************************/

#boeden-bilder {
	margin: 0;
	padding: 0;
	width: 640px;
	list-style: none;
	position: relative;
}
ul#boeden-bilder li {
	display: inline;
	float: left;
	margin: 20px 20px 0 0;
	background: #111;
	position: relative;
}
ul#boeden-bilder li, ul#boeden-bilder img {
	width: 300px;
	height: 220px;
}
ul#boeden-bilder li.clear {
	display: block; float: none; clear: both;
	width: 0; height: 0;
}
ul#boeden-bilder li div.caption {
	font-size: 24px;
	line-height: 36px;
	font-weight: bold;
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 5;
	text-shadow: 2px 2px 2px #000;
}

/******************************************************************************
 *	Die Entstehung													 		  *
 ******************************************************************************/

#die-entstehung {
	margin-top: 140px;
}

/******************************************************************************
 *	Das Werk																  *
 ******************************************************************************/
#das-werk {
	margin-top: 140px;
}

p.werk-listing {
	display: block;
	float: left;
}
.float4 p.werk-listing { width: 178px; }
.float5 p.werk-listing { width: 258px; }
img.werk-listing {
	display: block;
	float: left;
	width: 100px; height: 100px;
	/*border: 1px solid white;*/
	margin-right: 20px;
}

#timeline {
	position: relative;
	width: 780px;
	height: 500px;
	margin: 60px 0 100px;
	left: -80px;
	/*background: url("/img/timeline/timeline_bg.png") center center no-repeat;*/
}
#timeline ul {
	list-style: none;
	position: relative;
	width: 100%;
	height: 100%;
}
#timeline li { position: absolute; text-align: center; font-size: 13px; color: #b8e133; }
#timeline li img { display: block; border: 1px solid rgba(255,255,255,0.2); }
/* columns */
#timeline .no01, #timeline .no05, #timeline .no09 { left:  80px; }
#timeline .no02, #timeline .no06, #timeline .no10 { left: 252px; }
#timeline .no03, #timeline .no07, #timeline .no11 { left: 424px; }
#timeline .no04, #timeline .no08, #timeline .no12 { left: 596px; }
/*#timeline .no01, #timeline .no08, #timeline .no09 { left:  80px; }
#timeline .no02, #timeline .no07, #timeline .no10 { left: 252px; }
#timeline .no03, #timeline .no06, #timeline .no11 { left: 424px; }
#timeline .no04, #timeline .no05, #timeline .no12 { left: 596px; }*/
/* rows */
#timeline .no01, #timeline .no02, #timeline .no03, #timeline .no04 { top:  21px; }
#timeline .no05, #timeline .no06, #timeline .no07, #timeline .no08 { top: 191px; }
#timeline .no09, #timeline .no10, #timeline .no11, #timeline .no12 { top: 361px; }

ul#entstehung-bilder { list-style: none; margin-top: 20px; width: 720px; }
ul#entstehung-bilder li { width: 140px; height: 140px; margin: 20px 20px 0 0; padding: 0; float: left; }
ul#entstehung-bilder li img { width: 140px; height: 140px; margin: 0; padding: 0; }
ul#entstehung-bilder li.clear { width: 0; height: 0; margin: 0; padding: 0; float: none; clear: both; display: block; }



/******************************************************************************
 *	Der Kontakt																  *
 ******************************************************************************/

#content #der-kontakt { margin-bottom: 50px;
	margin-top: 140px; }
#der-kontakt h2, #der-kontakt p { margin-bottom: 12px; }
#der-kontakt h2:nth-child(n+2) { margin-top: 32px; }


#contactform { margin: 50px 0; }
#contactform textarea, #contactform input, #contactform label {
	font-family: "Font1";
	font-size: 15px;
	display: block;
}
#contactform textarea, #contactform input {
	display: block;
	padding: 6px;
	margin: 0;
	-webkit-transition: all 500ms ease;
	   -moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		 -o-transition: all 500ms ease;
			transition: all 500ms ease;
}
#contactform textarea, #contactform input, #contactform-submit-result, #captcha {
	background-color: #b8e133;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
		-ms-border-radius: 4px;
		 -o-border-radius: 4px;
			border-radius: 4px;
}
#contactform input { width: 288px; }
#contactform textarea { width: 608px; min-width: 608px; max-width: 608px; background: #e0e0e0; }
#contactform input.button {
	position: absolute;
	bottom: 0; left: 0;
	width: 300px; height: 50px;
	padding: 0;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 5px;
}
#contactform label {
	margin: 0 16px 4px 0;
}
#contactform-captcha-send { height: 100px; }
#captcha { display: block; margin: 0; padding: 3px; }
#captcha-refresh {
	position: absolute;
	bottom: 5px; left: 5px;
	background: #b8e133;
	background: rgba(184, 225, 51, 0.7);/**/
/*	border: 1px solid rgba(0,0,0,0.5);/**/
	-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
		-ms-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
		 -o-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
			box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);/**/
}
#contactform-submit-result {
	opacity: 0;
	padding: 10px;
	color: black;
}
#contactform-submit-result p { margin: 0; }
#contactform .error {
	background: #f53;
}
#contactform-submit-result.hidden {
	display: none;
}

#map-wrapper {
	position: relative;
	width: 620px;
	height: 460px;
	margin-top: 30px;
}
#map-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#map-container.zoom {
	position: fixed;
	z-index: 1000;
}
#map {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: black;
}
#map-zoom {
	position: absolute;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: 10px;
	color: black;
	cursor: pointer;
	right: 20px;
	bottom: 20px;
	padding: 5px;
	background: #b8e133;
	background: #ddd;
	border-width: 2px;
	border-style: solid;
	border-color: #deff71 #83a024 #83a024 #deff71;
	border-color: #fff #888 #888 #fff;
}

.black { color:black; }

/*
	RESPONSIVE STYLES 
*/

@media only screen and (max-width: 975px) {
	
#wrapper {
	position: absolute;
	width: 100%;
	top: 0;
	min-width: 720px;
}
#content {
	position: relative;
	width: 720px;
	left:0;
	margin:0 auto;
}
	#logo, #nav, #nav.fixed { position:relative; display:block;  margin: 0 auto; padding:0;top:0; left:0; }
	
	#nav.fixed {
		margin-left: 0px; width:100%;
		position:fixed;
		background: rgba(0,0,0,0.8) url("/img/navi_trenner.png") bottom left repeat-x;
	}
	

#nav.fixed li {
	display: block;
	float:left;
}
#nav.fixed li.separator {
	display:none;
}
#nav.fixed a {
	font-size: 12px;
	width: 90px;
	padding: 15px 0;
	display: block;
	text-align: center;
}
	
	
	#logo { margin-top:25px; }
	#nav { margin:20px auto -50px auto; }
	#logo-nav { display:block; width:100%; position:relative; height: 632px; }
	#facebook-ribbon, #wk_logo { position:absolute; }
}