@font-face { font-family: 'Matchmaker-Regular'; src: url('../fonts/Matchmaker-Regular.eot'); src: url('../fonts/Matchmaker-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Matchmaker-Regular.woff2') format('woff2'), url('../fonts/Matchmaker-Regular.woff') format('woff'), url('../fonts/Matchmaker-Regular.ttf') format('truetype'); }

@font-face { font-family: 'DINPro-Light'; src: url('../fonts/DINPro-Light.otf') format('opentype'), url('../fonts/DINPro-Light.woff') format('woff'), url('../fonts/DINPro-Light.ttf')  format('truetype'), url('DINPro-Light.svg#DINPro-Light') format('svg'); font-weight: normal; font-style: normal; }

html {
	font-family: 'DINPro-Light';
	font-size: 14px;
}

body {
	background-color: #e40039;
}

h1 {
	font-family: 'Matchmaker-Regular';
	font-size: 10vh;
	line-height: 2.5em;
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

h2 {
	font-family: 'Matchmaker-Regular';
	font-size: 2.5em;
    line-height: 2.5em;
	width: 80%;
	margin: 0 auto;
	text-align: center;
	overflow: visible;
}

p {
	font-size: 2em;
	line-height: 1.6em;
	margin: 0 auto;
	width: 80%;
	margin-top: 3em;
}

p a, 
ul a {
	color: #000;
	text-decoration: none;
}

p a:hover,
ul a:hover{
	text-decoration: line-through;
}

b { font-weight: bold; }
	

/* NAV */

	nav {
		color: rgba(255, 255, 255, 0.6);
		display: none;
	}

	nav a {
		text-decoration: none;
		color: rgba(255, 255, 255, 0.6);
		transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-webkit-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease;
		/*font-size: 2em;
		text-transform: uppercase;*/
		letter-spacing: 5px;
	}
	
	nav li:hover a,
	nav li a:hover {
		color: rgba(255, 255, 255, 1);
		text-decoration: line-through;
	}

	nav ul {
		margin: 3em auto;
		width: 70%;
	}

	nav li {
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		padding: 1.5em 0;
	}

	nav li.item-indent { 
		padding-left: 5%;
	}

	nav li:hover {
		cursor: pointer;
	}

	i {
		float: right;
	}


/* SECTION MAIN CSS */

section {
	color: #000;
	background-color: #FFF;
	border: .6em solid #e40039;
	box-sizing: border-box;
	position: relative;
}

/* SUBNAV */
#subnav_wrapper {
	width: 100%;
	position: absolute;
	top: 50px;
}

#subnav {
	margin: 0 auto;
	width: 80%;	
}

	#subnav a {
		color: rgba(0, 0, 0, 1);
		transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-webkit-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease;
		text-decoration: none;
	}

	#subnav a:hover {
		text-decoration: line-through;
	}
	
	/* AKTUELLE SPRACHE */
	.current {
		text-decoration: line-through;
	}

#subnav ul {
	display: inline;
	float: left;
}

#subnav li {
	display: inline;
	float: left;
	margin-right: 1em;
}


/* RECHTES NAVIGATIONSFELD*/
#icon {
	display: inline-block;
	float: right;
	font-size: 2.5em;
	cursor: pointer;
	margin-top: -0.3em;
}

/* WEINGUT */
#weingut {
	background: url("../images/weingut-roterfaden-erde.jpg") no-repeat center center;
	background-size: cover;
}

/* PORTRAET */
#portraet {
	border-color: #FFF;
	padding: 15em 0;
}

/* IMPRESSUM */
#impressum {
	border-color: #FFF;
	padding: 15em 0;
	color: #000;
	background-color: #FFF;
	border: .6em solid #e40039;
	box-sizing: border-box;
	position: relative;
}

h3 {
	font-size: 1.5em;
	width: 80%;
	margin: 3em auto 0 auto;
	text-align: center;
	text-transform: uppercase;
}

#impressum p {
	font-size: 1em;
	line-height: 1.6em;
	margin: 0 auto;
	width: 80%;
	margin: 2em auto;
}

/* WEINE */
#weine {
	padding: 15em 0;
}
.button-wrapper {
	width: 100%;
	position: relative;
	text-align: center;
}
.button-wrapper a {
	display: inline-block;
	width: auto !important;
	text-align: center;
}
.button-wrapper .button {
	width: auto !important;
}
.button {
	padding: 1.5em 3.5em;
	display: inline-block;
	border: 2px solid #e40039;
	margin: 0 auto;
	margin-top: 8em;
	color: #e40039;
	background-color: #fff;
}

	a .button {
		text-decoration: none;
		display: inline-block;
		color: #e40039;
		background-color: #fff;
		transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-webkit-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease;
	}

	a:hover .button {
		background-color: #e40039; 
		color: #fff; 
		text-decoration: none;
	}

/* SORTIMENT */
.sortiment {
	border-color: #ffffff;
	padding: 15em 10% 0 10%;
}
.sortiment .teaser {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.sortiment .teaser-text {
	position: absolute;
	width: 66%;
	padding: 0;
	background: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

}
.sortiment img {
	width: 100%;
	height: auto;
}
.sortiment .teaser-text *,
.sortiment .item-text * {
	margin-top: 0;
	width: 100%;
}
.sortiment .teaser-text h2 {
	line-height: 4.5em;
}
.sortiment .teaser-text h3 {
	margin-top: 1em;
}
.sortiment .item {
	margin-top: 15em;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 100%;
}
.sortiment .item-text {
	position: absolute;
	height: 60%;
	width: 82%;
	width: calc(85.75% - 1.2em);
	border: .6em solid #e40039;
	top: -50%;
	z-index: 1;
	padding: 0;
}
.sortiment .item-text .text-wrapper {
	position: absolute;
	left: 15%;
	width: 70%;
	top: 50%;
	transform: translateY(-50%);
}
.sortiment .item .item-img {
	position: relative;
	z-index: 0;
	margin-top: 55%;
	width: 45%;
}
.sortiment .item:nth-child(2n) .item-text {
	left: auto;
	right: 0;
}
.sortiment .item:nth-child(2n) .item-img {
	margin-left: -7.5%;
	margin-right: auto;
}
.sortiment .item:nth-child(2n+1) .item-text {
	left: 0;
	right: auto;
}
.sortiment .item:nth-child(2n+1) .item-img {
	margin-right: -7.5%;
	margin-left: auto;
}
.sortiment .item-text h3 {
	font-family: 'Matchmaker-Regular';
	font-size: 2em;
	text-transform: none;
	line-height: 2.5em;
	margin: 0 0 1em 0;
}
.sortiment .item-text p {
	font-size: 1.5em;
	margin: 1.5em 0;
}
.sortiment .item-text ul {
	text-align: center;
	margin: 2em 0 4em 0;
}
.sortiment#premium .item-text,
.sortiment#herbarium .item-text {
	left: 0;
	right: 0;
	width: 100%;
	width: calc(100% - 1.2em);
}
.sortiment#premium .item-img,
.sortiment#herbarium .item-img{
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 1199px) {
	.sortiment .item-text {
		height: 70%;
		top: -60%;
	}
	.sortiment .item .item-img {
		margin-top: 60%;
	}
}

@media screen and (max-width: 959px) {

	.sortiment .teaser-text h2 {
		line-height: 2.5em;
		margin: 0.5em 0;
	}

	.sortiment#classic .item-text,
	.sortiment#premium .item-text,
	.sortiment#herbarium .item  .item-text {
		left: auto;
		right: auto;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		width: calc(100% - 1.2em);
		height: auto;
		position: relative;
		top: 0;

	}
	.sortiment#classic .item-img,
	.sortiment#premium .item-img,
	.sortiment#herbarium .item .item-img {
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		padding-left: 3.6em;
		padding-right: 3.6em;
		margin-top: -4em;
		width: auto;
		max-width: 420px;
	}
	.sortiment .item-text .text-wrapper {
		position: relative;
		margin: 0 3em;
		width: auto;
		top: 0;
		left: 0;
		transform: none;
	}
	.sortiment .item-text h3 {
		margin-top: 2em;
	}
	.sortiment .item-text p {
		margin-bottom: 4em;
	}

}

@media screen and (max-width: 767px) {
	.sortiment .teaser {
		width: calc(126% + 1.2em);
		margin-left: calc(-13% - 0.6em);
	}
	.sortiment .teaser-text {
		position: absolute;
		width: calc(80% - 1.2em);
	}
}

@media screen and (max-width: 459px) {
	.sortiment .item {
		width: 120%;
		margin-left: -10%;
	}
	.sortiment .item-text .text-wrapper { margin: 0 1.5em; }
}


/* HERBARIUM */
.sortiment#herbarium .item-text {
	height: initial;
	top: initial;
	position: relative;
	padding: 12em 0 15em 0;
}
.sortiment#herbarium .item-text .text-wrapper {
	top: initial;
	transform: initial;
	position: relative;
}
.sortiment#herbarium .item-text .button-wrapper {
	margin: 8em 0 0 0;
}

.sortiment#herbarium .item .item-img {
	margin-top: -8em;
}

@media screen and (max-width: 959px) {
	.sortiment#herbarium .item-text {
		padding: 3em 0 12em 0;
	}
	.sortiment#herbarium .item-text .button-wrapper {
		margin-top: 4em;
	}
}

/* IMPRESSIONEN */
#impressionen {
	border-color: #FFF;
	padding: 15em 10% 15em 10%; 
}

#grid {
	width: 80%;
	margin-top: 3em;
	margin-left: auto;
	margin-right: auto;
	font-size: 2em;
}

#grid > * {
	line-height: 0 !important;
	-webkit-backface-visibility: hidden;
}
.grid-sizer, .grid-item { 
	width: calc( ( 100% - 40px ) / 3);
/* 	width: calc( ( 100% / 3 ) - 40px); */
	overflow: hidden;
	margin-bottom: 20px;
	background-color: #e40039; 
}

.gutter-sizer { 
	width: 20px;
}

.grid-item--width1 { 
	width: 100%;
}

.grid-item--width2 { 
	width: calc( ( 100% - 10px ) * ( 2 / 3 )  );
}

.grid-item>img {
	width: 100%;
}

#grid>a {
	line-height: 0;
	display: inline-block;
}


@media only screen and (max-width : 800px) {

	.grid-item {
		width: 100% !important;
	}
	
	.grid-item--width2 {
		width: 100%;
	}
	
	.gutter-sizer { 
		width: 0px;
	}
  
}

/* KONTAKT */
#kontakt {
	padding: 5em 0 15em 0;
	border: none;
}

/* MAP */

#map {
	width: 100%;
	height: 40em;
}

#map a:hover {
	text-decoration: line-through;
}
#map .map-marker-popup h3 { 
	font-size: 16px; 
	font-family: 'Matchmaker-Regular';
	text-transform: lowercase;
	margin: 0;
	text-align: left;
}
#map .map-marker-popup p {
	font-size: 1em;
	margin: 0;
	text-align: left;
	width: 100%;
}

/* FOOTER */
#footer {
	padding: 5em 0 15em 0;
	background-color: #e40039;
	color: #FFF;
}

	#footer a {
		text-decoration: none;
		color: rgba(255, 255, 255, 0.6);
		transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-webkit-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease;
	}

	#footer a:hover {
		color: rgba(255, 255, 255, 1);
		text-decoration: line-through;
	}

.footer-liste ul {
	margin: 3em auto;
	width: 70%;
}

.footer-liste li {
	margin: 1em 0;
}

	.footer-liste li a:hover {
		color: rgba(255, 255, 255, 1);
		text-decoration: line-through;
	}

	.footer-liste a {
		text-decoration: none;
		color: rgba(255, 255, 255, 0.6);
		transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-webkit-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease;
	}

.kontaktdaten {
	width: 80%;
	margin-left: 2.5em;
	display: inline-block;
}

.kontaktdaten p {
	font-size: 1em;
	line-height: 2em;
	margin: 0 auto;
	margin-bottom: 2.5em;
	width: 100%;
}
	
#links {
	margin-left: 2.5em;
	display: inline-block;
	vertical-align: top;
}

#sites {
	margin-left: 0em;
	display: inline-block;
}



.socialmedia, .credits {
	text-transform: uppercase;
	line-height: 2em; 
	letter-spacing: 5px;
	text-align: center;
	margin: 5em auto;
}

/* Bio-Siegel */
.bio-cert img { margin-top: 15px;}

/* Responsive spacings <= Tablet */
@media screen and (max-width: 959px) {
	h1 { font-size: 8vh; }
	p { 
		margin-top: 2em; 
	}
	.sortiment .item-text p+p {
		margin-top: -2em;
	}
	.button { 
		margin-top: 4em; 
	}
	#portraet, 
	#weine, 
	.sortiment,
	#impressionen { 
		padding-top: 6em;
		padding-bottom: 6em;
	}
	.sortiment .item { 
		margin-top: 6em; 
	}
	nav li.item-indent { 
		padding-left: 10%;
	}
}

/* Animation */

.animated { 
	-webkit-animation-duration: 2s; 
	animation-duration: 2s; 
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both; 
}

.animated.infinite { 
	-webkit-animation-iteration-count: infinite; 
	animation-iteration-count: infinite; 
}

.animated.hinge { 
	-webkit-animation-duration: 2s; 
	animation-duration: 2s; 
}
	
	.bounceInDown {
		-webkit-animation-name: bounceInDown;
		animation-name: bounceInDown;
		}
	@-webkit-keyframes bounceInDown {
    	0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); }
    	60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); }
    	80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    	100% { -webkit-transform: translateY(0); transform: translateY(0); }
	}
	
	@keyframes bounceInDown {
   	 	0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); }
    	60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
    	80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
    	100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	}