/*
Theme Name: Fieldsets
Author: Ulf Paule
Version: 2.1
*/


/* fonts */

@font-face {
  font-family: 'Roboto Condensed';
  src: url('assets/fonts/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('assets/fonts/RobotoCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
	font-family: 'LeagueGothic-Regular';
	src: url('assets/fonts/LeagueGothic-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}


/* basics / resets */

html {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 20px;
}
@media (max-width: 1299px) {
	html { font-size: 19px; }
}
@media (max-width: 1099px) {
	html { font-size: 18px; }
}
@media (max-width: 999px) {
	html { font-size: 17px; }
}
@media (max-width: 719px) {
	html { font-size: 16px; }
}
@media (max-width: 511px) {
	html { font-size: 15px; }
}
@media (max-width: 359px) {
	html { font-size: 14px; }
}


body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1em;
	background-color: white;
	color: #092754;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

::-moz-selection {
	background: #092754;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #092754;
	color: #fff;
	text-shadow: none;
}

form {
	margin: 0;
	padding: 0;
}

table, td, input, textarea, select {
	font-family: inherit;
	font-size: 1em;
}

img, iframe {
	border: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}



/* page */

#page {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
	
	min-height: 100vh;
	box-sizing: border-box;
	
	position: relative;
	z-index: 100;
	
	width: 100%;
	overflow: hidden;
}


main {	
	background: #f2f2f2;
	background: linear-gradient(to right, #fefefe 0%,#f2f2f2 25%,#e8e8e8 50%,#d2d1d1 72%,#bebebe 84%,#d9d9d9 100%);
	padding-bottom: 4.5em;
}


/* header */

header {
	position: absolute;
	top: 1.25em;
	left: 1em;
	right: 1em;
	box-sizing: border-box;
}


#logo {
	display: block;
	margin: 0 auto;
	width: 10em;
	position: relative;
	z-index: 1000;
}
#logo img {
	width: 100%;
	height: auto;
}

.home #logo {
	width: 11.5em;	
}


/* footer */

footer {
	position: relative;
	background-color: white;
	text-align: center;
	padding: 2.1em 1.25em 2em 1.25em;
	line-height: 160%;
}

footer a {
	display: inline-block;
	white-space: nowrap;
}

footer ul {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
}
footer li {
	display: inline;
	margin: 0;
	padding: 0 0.75em;
	text-transform: uppercase;
}

#footer-menu {
	padding-top: 1.5em;
}


#foot-like,
#foot-mail {
	display: inline-block;
	width: 1em;
	height: 1em;
	position: relative;
	font-size: 2.25em;
	margin: 0 1em;
}
#foot-like::before, 
#foot-mail::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	margin-left: -0.5em;
	background: url(assets/images/email.svg) center center no-repeat;
	background-size: contain;
}
#foot-like::before {
	background-image: url(assets/images/like.svg);
}

/* pointer only */
@media (pointer: fine), not all and (-moz-touch-enabled) {
	#foot-like:hover::before,
	#foot-mail:hover::before {
		font-size: 1.15em;
	}
}


/* breakpoints */

.mobile-only {
	display: none;
}

@media (max-width: 999px) {
	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: block;
	}
}


#sortimentstage,
#homestage {
	position: relative;
	height: 80vh;
	/*
	background: url(assets/images/blurred-bg.jpg) 20% 66% no-repeat;
	background-size: cover;
	*/
}

@media (max-width: 1024px) {
	#sortimentstage,
	#homestage {
		height: 73vh;
	}
}


#sortimentstage + main,
#homestage + main {
	padding-top: 20vh;
}


#fixed-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50vh;
	background: url(assets/images/small-blurred-bg.jpg) 20% 66% no-repeat;
	background-size: cover;
}
.page-id-111 #fixed-bg,
.home #fixed-bg {
	height: 80vh;
	background-image: url(assets/images/blurred-bg.jpg);
}
@media (max-width: 1024px) {
	.page-id-111 #fixed-bg,
	.home #fixed-bg {
		height: 73vh;
	}
}

.hero-text {
	position: absolute;
	left: 22%;
	top: 30%;
	z-index: 30;
}

.hero-text em {
	font-style: normal;
	font-size: 1.2em;
}

#home-glas {
	position: absolute;
	top: 0;
	height: 100%;
	left: 0%;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
}
#home-glas img {
	-webkit-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
	width: 15.5em;
	max-width: 32vh;
}

#home-flaschen {
	position: absolute;
	bottom: -14vh;
	left: 62%;
	width: auto;
	height: 80vh;
	max-height: 868px;
	z-index: 10;
}

@media (max-width: 1024px) {
	#home-flaschen {
		height: 73vh;
	}
}

#substage {
	box-sizing: border-box;
	padding-top: 11em;
	padding-bottom: 4.5em;
	text-shadow: 0 0 0.25em RGBA(255,255,255,0.75);
	
}

#substage + main {
	padding-top: 4.5em;
}


@media (max-width: 1399px) {
	.hero-text {
		left: 16%;
	}
	#home-flaschen {
		left: 65%;
	}
}

@media (max-width: 1199px) {
	.hero-text {
		left: 14%;
	}
	#home-flaschen {
		left: auto;
		right: 2em;
	}
}

@media (max-width: 899px) {
	.hero-text {
		left: 12%;
	}
}

@media (max-width: 719px), (max-aspect-ratio: 1/1) {
	.hero-text {
		font-size: 0.95em;
	}
	#home-flaschen {
		right: 0;
		height: 73vh;
	}
	#home-glas img {
		width: 12em;
		max-width: 28vh;
	}
	#logo {
		font-size: 0.9em;
	}	
	#scroll-down {
		display: none;
	}
	#home-glas .parallax-object {
		left: 33% !important;
	}
}

@media (max-width: 511px) {
	.hero-text {
		font-size: 0.8em;
	}
	#home-flaschen {
		height: 71vh;
	}

	#home-glas img {
		width: 10em;
		max-width: 24vh;
	}
	#logo {
		font-size: 0.9em;
	}
}
@media (max-width: 399px) {
	#logo {
		font-size: 0.8em;
	}
	.hero-text {
		font-size: 0.75em;
	}
	#home-flaschen {
		height: 66vh;
	}
	#home-glas img {
		width: 9em;
		max-width: 22vh;
	}
}


.swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23092754'%2F%3E%3C%2Fsvg%3E") !important;
}

#scroll-down,
.swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23092754'%2F%3E%3C%2Fsvg%3E") !important;
}


#scroll-down {
	position: absolute;
	bottom: -12vh;
	z-index: 20;
	left: 50%;
	margin-left:-1em;
	width: 2em;
	height: 2em;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity 0.25s ease;
}
body:not(.at-top) #scroll-down {
	opacity: 0;
}


.sep {
	height: 1px;
	background: -moz-linear-gradient(left, rgba(9,39,84,0) 0%, rgba(9,39,84,1) 20%, rgba(9,39,84,1) 80%, rgba(9,39,84,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(9,39,84,0) 0%,rgba(9,39,84,1) 20%,rgba(9,39,84,1) 80%,rgba(9,39,84,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(9,39,84,0) 0%,rgba(9,39,84,1) 20%,rgba(9,39,84,1) 80%,rgba(9,39,84,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
}


/* diamonds */

#teaser-stage {
	position: relative;
	max-width: 60em;
	margin: 0 auto;
}

@media (min-width: 1300px) {
	#teaser-stage {
		font-size: 1.05em;
	}
}

@media (min-width: 1600px) {
	#teaser-stage {
		font-size: 1.1em;
	}
}

@media (max-width: 899px) {
	#teaser-stage {
		font-size: 0.9em;
	}
}
@media (max-width: 799px) {
	#teaser-stage {
		font-size: 0.8em;
	}
}

@media (max-width: 719px) {
	.teaser-stage-ratio {
		padding-top: 94% !important;
	}
	#t-sortiment {
		left: 50% !important;
		top: 34% !important;
		z-index: 92 !important;
	}
	#t-marke {
		left: 30% !important;
		top: 64% !important;
	}
	#t-taunus {
		left: 75% !important;
		top: 69% !important;
	}
	#t-geschichte {
		left: 51% !important;
		top: 93% !important;
	}
	
	#t-aktion1 {
		top: 5.5% !important;
		left: 24.5% !important;
	}	
	#t-aktion2 {
		top: 8% !important;
		left: 78% !important;
		z-index: 90 !important;
	}
}

@media (max-width: 511px) {
	#teaser-stage {
		font-size: 0.675em;
	}
}
@media (max-width: 399px) {
	#teaser-stage {
		font-size: 0.575em;
	}
}
@media (max-width: 359px) {
	#teaser-stage {
		font-size: 0.5em;
	}
}

.diamond {
	position: relative;
	display: block;
	width: 10em;
	height: 10em;
	overflow: hidden;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	box-shadow: 0 0 1em RGBA(30,30,30,0.2)
}

.diamond > div {
	position: absolute;
	left: -21%;
	top: -21%;
	width: 142%;
	height: 142%;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background-size:cover;
	background-position: center center;
}

.diamond h2 {
	position: absolute;
	padding: 0;
	left: 0;
	width: 100%;
	top: 50%;
	text-align: center;
	margin-top: -1.2em;
	font-size: 2em;
	text-shadow: 0 0 0.25em RGBA(255,255,255,1);
}

.geschichte-schild {
	margin: 3em auto 0 auto;
}
@media (min-width: 1000px) {
	.geschichte-schild {
	margin-top: -13.75em;
	margin-left: auto;
	}
}
.geschichte-schild img {
	width: 16em;
	margin: 0 auto;
}

.hero-slider .image-wrap::before {
	pointer-events: none;
	content: "";
	position: absolute; 
	top: 18%;
	left: 78%;
	width: 2em;
	height: 2em;
	z-index: 10;
	background: transparent url(assets/images/iconmonstr-plus-5.svg) center center no-repeat;
    background-size: contain;
}

.hero-slider .image-wrap.bottles-3::before {
	left: 82%;
}
.hero-slider .image-wrap.bottles-1::before {
	left: 62.5%;
}

.analyse-table td {
	padding: 0.2em 0.5em;
}
.analyse-table td:last-child {
	text-align: right;
}
.analyse-table tr:nth-child(odd) td {
	background-color: #e7e7e7;
}


@media (min-width: 1000px) {
	.page-id-112 .image-wrap {
		margin-left: -1.5em;
		margin-right: -1.5em;
	}
}

/* appear when image ready */
.image-wrap {
	transition: opacity 0.33s ease;
}
.image-wrap:not(.image-ready) {
	opacity: 0;
}



@media (max-width: 399px) {	
	#foot-icons {
		font-size: 0.9em;
		letter-spacing: -0.5em;
	}
}


#dmw {
	background: url(assets/images/dmw.svg) center center no-repeat;
	background-size: contain;
	display: inline-block;
	width: 4.5em;
	height: 3.5em;
	margin: 0 2.1em;
	transform: translateY(0.5em);
}

/* pointer only */
@media (pointer: fine), not all and (-moz-touch-enabled) {
	#dmw:hover {
		transform: translateY(0.5em) scale(1.11);
	}
}