@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700&family=Poppins:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet');

@import url(normalize.min.css);
@import url(animate.css);
/* @import url(aos.css); */
@import url(navigation.css);
@import url(navigation-custom.css);
@import url(swipebox.min.css);


/****************************************  SETUP  ****************************************/

:root {
	--color-primary: rgb(102,102,102);
	--color-primary-dark: rgb(65,65,65);
	--color-purple: rgb(134, 28, 69);
	--color-accent: rgb(245, 245, 245);

	--color-link: rgb(68, 144, 30);
	
	--fs-tiny: 0.75rem;
	--fs-small: 0.875rem;
	--fs-body: 1rem;
	--fs-medium: 1.25rem;
	--fs-heading1: 2.25rem;
	--fs-heading2: 1.875rem;
	--fs-heading3: 1.5rem;
	
	--fw-regular: 400;
	--fw-medium: 600;
	--fw-bold: 700;

	--size-100: 5px;
	--size-200: 10px;
	--size-300: 15px;
	--size-400: 20px;
	--size-500: 30px;
	--size-600: 60px;
}

/****************************************  GENERAL  ****************************************/

::selection {background: rgb(246, 233, 237)}
::-moz-selection {background: rgb(246, 233, 237)}

body {color: var(--color-primary); font-family: 'Poppins', Arial, sans-serif; font-display: swap; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 1.625rem; }

a, div {outline:none}

img, iframe {border: none}

img {max-width:100%; height:auto;}
	main img {border-radius: 10px;}

p {margin:15px 0; hyphens: auto;}
	p.heading {font-size: var(--fs-small); font-weight: var(--fw-regular); margin:0 0 10px; text-transform:uppercase; line-height:inherit}
	.contact p.heading {margin-top: 15px;}
	
	p.medium {
		font-size: var(--fs-medium);
		line-height: 1.75rem;
		margin: 20px 0;
		padding: var(--size-500);
		border-radius: 6px;
		background-color: var(--color-accent);
		background-image:url(../images/leaf_green.svg);
		background-repeat: no-repeat;
		background-size: 100px 64px;
		background-position: center left;
		text-align: center;
		}

	p.small {font-size: var(--fs-small);}

strong, b {font-weight: var(--fw-bold)}
em {font-style:italic}

.small {font-size: var(--fs-small)}

.wow {visibility:hidden}


/*** Headings ***/
h1 {color: var(--color-purple); font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: var(--fs-heading2); font-weight: var(--fw-medium); font-display: swap; line-height: 40px; margin:0 0 30px; text-transform:uppercase; hyphens: auto;}
	.home h1 {font-weight: var(--fw-regular);}
	.ref h1 {margin-bottom: var(--size-100);}
h2 {color: var(--color-purple); font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: var(--fs-heading3); font-weight: var(--fw-medium); font-display: swap; line-height:var(--fs-heading2); margin-bottom:20px; text-transform:uppercase; }
	.contact h2 {color: #fff; font-size: var(--fs-heading1); font-weight: var(--fw-medium); line-height: 40px}
h3 {color: var(--color-primary); font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: var(--fs-medium); font-weight: var(--fw-medium); font-display: swap; line-height:var(--fs-heading3); margin-bottom:10px; text-transform:uppercase; }
	.offers h3 {color: #fff; padding-top: 50px;}
	.contact h3 {color: #fff;}
	.contact h3, .process h3 {text-transform: none; font-family: 'Poppins', Arial, sans-serif; font-size: var(--fs-body); font-weight: var(--fw-bold); margin:10px 0 0;}



@media only screen and (min-width : 50em) {
h1 {font-size: var(--fs-heading1); line-height: 40px}
h2 {font-size: var(--fs-heading2); line-height: var(--fs-heading2)}
h3 {font-size: var(--fs-heading3); line-height: var(--fs-heading2)}	
}

/*** Links ***/
a:link, a:visited, a:active, a:hover {text-decoration: none}

main a:link, main a:visited, .contact a:link, .contact a:visited {color: var(--color-link); font-weight: var(--fw-medium);}
main a:active, main a:hover {text-decoration: underline;}

footer a:link, footer a:visited {color:#fff;}
footer-image a:active, footer a:hover {color:#fff; opacity: 0.7}

a.vor:after {content:"\f178"; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:var(--fs-small); padding-left:6px; text-decoration:none; display:inline-block}
a.zurueck:before {content:"\f177"; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:var(--fs-small); padding-right:6px; text-decoration:none; display:inline-block}

a[href ^="mailto:"]:before {content:"\f0e0"; font-family:'Font Awesome 6 Free'; font-weight:900; padding:0 8px 0 2px; text-decoration:none; display:inline-block}
a[href ^="tel:"]:before {content:"\f095"; font-family:'Font Awesome 6 Free'; font-weight:900; padding:0 8px 0 2px; text-decoration:none; display:inline-block}
	
a.forward:after, .forward a:after {content:"\f178"; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:0.875rem; padding-left:6px; text-decoration:none; display:inline-block}
a.back:before, .back a:before {content:"\f177"; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:0.875rem; padding-right:6px; text-decoration:none; display:inline-block}

.offers a:link, .offers a:visited {color: #fff; font-weight: var(--fw-regular);}
.offers .card-link {font-weight: var(--fw-medium);}
.offers .card-link:before {content:"\f178"; font-family:'Font Awesome 6 Free'; font-weight:900; padding:0 8px 0 0; text-decoration:none; display:inline-block}

.offers .tel a:link, .offers .tel a:visited {color: var(--color-link); font-weight: var(--fw-medium); padding: var(--size-200) 0;}


.breadcrumbs .item-1 a:link:before {content:"\f177"; font-family:'Font Awesome 6 Free'; font-weight:900; padding:0 8px 0 2px; text-decoration:none; display:inline-block}
.breadcrumbs .item-2 a:link:after {content:"\f178"; font-family:'Font Awesome 6 Free'; font-weight:900; padding:0 2px 0 8px; text-decoration:none; display:inline-block}


/*** Utilities ***/
.clear {clear:both; display:block; overflow:hidden}
div.separator {border-top:1px solid var(--color-primary); clear:both; height:30px; margin-top:30px;}

div.vor, div.zurueck {border-top:1px solid #ccc; padding-top: 10px; margin: 30px 0;}
	div.zurueck {text-align:right; font-size: var(--fs-smallest); font-variant: small-caps}
	
.back {margin-top: 20px; text-align:right}	


/*** Lists ***/
.content ul {margin:10px 0 10px 25px; list-style:none}
.content ol {margin:10px 0 10px 25px}
.content ul li, .content ol li {padding:2px 0; position:relative}
	.content ul li:before {content:"\f06c"; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--color-purple); position:absolute; margin-left:-25px}

/*** Images ***/
.bildlinks {float:left; margin:0 20px 20px 0}
.bildrechts {float:right; margin:0 0 20px 20px}
.bildzentriert {display:block; margin-left:auto; margin-right:auto}


@media only screen and (max-width : 56em){
	.bildlinks, .bildrechts {float:none; display:block; margin:20px auto;}
	img.bildlinks, img.bildrechts {height:auto}
}


/*** Buttons ***/
.topbutton {position:fixed; bottom:20px; right:20px; background: var(--color-purple); width:40px; height:40px; border-radius: 40px; display:block; text-decoration:none; display:none; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease}
.topbutton i {color:#fff; margin:0; position:relative; left:10px; top:10px; font-size:20px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease}
.topbutton:hover {opacity: 0.7}
.topbutton:hover i {top:4px}

.button {display:inline-block; margin:30px auto; text-align:center}
	.button a:link, .button a:visited {background:var(--color-purple); border-radius: 5px; color:#fff; padding:12px 30px; text-decoration:none; text-align:center; text-transform:uppercase; position:relative; top:0; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s}
	.button a:before {content:"\f178"; font-family:'Font Awesome 6 Free'; font-weight:900; padding:0 8px 0 0; text-decoration:none; display:inline-block}

	.contact .button a:link, .contact .button a:visited {background:#fff; border-radius: 5px; color:var(--color-purple); padding:12px 30px; text-decoration:none; text-align:center; text-transform:uppercase; position:relative; top:0; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s}
	
.button a:hover, a.button:hover, .contact .button a:hover {opacity:0.7; text-decoration:none; top:-5px; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s}


/****************************************  STRUCTURE  ****************************************/

html, body {height: 100%;} /* Sticky footer */

div.container {
  --max-width: 1400px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 3));
  margin-inline: auto;	
}

main {padding:50px 0; min-height: 400px;} /* Sticky footer */
	.home main {padding-top: 50px;}

/* 900px */
@media only screen and (min-width : 56.25em) {
.home main {padding-top: 100px;}
}	

header {
	position:fixed;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 6px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	height: 100px;
	margin:30px;
	width: calc(100% - 60px);
	display:flex;
	z-index: 999;
	-webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s
}

header.smaller {height:70px; margin-top: 0;}

.navigation-logo {padding-bottom: 30px;}
.navigation-logo a {background:url(../images/Logo_Schneuwly_Gartenbau.webp) no-repeat; background-size:171px 130px; display:inline-block; height:130px; text-indent:-9999px; width:171px; z-index:1000;
	-webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s}

header.smaller .navigation-logo {padding-bottom: 20px;}
header.smaller .navigation-logo a {background-size:118px 90px; height:90px; width:118px;}

@media (max-width: 75em) { .navigation-header .navigation-logo {padding: 0 0 30px 1rem;} }

.intro {position:absolute; top:200px; left:30px; right:auto; z-index:100;}
	.intro p, .intro-mobile p {color:#fff; font-size: var(--fs-body); margin-bottom: 10px; text-shadow: 2px 2px 2px #000;}
	.intro p.heading, .intro-mobile p.heading {font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: var(--fs-medium); font-weight: var(--fw-medium); font-display: swap; line-height: var(--fs-heading2); hyphens: none;}

.intro-mobile {display:none; visibility: hidden;}	


@media only screen and (max-width : 64em){
.intro {display:none; visibility: hidden;}
.intro-mobile {display:block; visibility: visible; background: rgb(124,194,66); padding: var(--size-400) var(--size-500); margin-top: var(--size-500); border-radius: 6px;}
.intro-mobile p {text-shadow: none}
}


@media only screen and (min-width : 64em){
	.intro {top:400px; left:5%; right:auto; max-width: 720px;}
	.intro p {font-size: var(--fs-body);}
	.intro p.heading {font-size: 1.625rem; line-height: var(--fs-heading1);}
}

@media only screen and (min-width : 80em){
	.intro {top:520px; left:5%; right:auto; max-width: 720px;}
}

@media only screen and (min-width : 120em){
	.intro {top:750px; left:5%; right:auto; max-width: 720px;}
}



.slider {width:100%; visibility:hidden; z-index:-1; top:0}
	.slider.slick-initialized {visibility:visible}
	
	
.content, .welcome, .offers {overflow:visible; margin-bottom: 50px;}
.process {background-color: var(--color-accent); margin-top: 100px; margin-bottom: -50px; padding: 100px 0;}

.ref .content {text-align: center;}

.contact {background-color: var(--color-purple); color: #fff; margin-bottom: 0; overflow:hidden}
	.contact div.container {background-image:url(../images/leaf.svg); background-repeat: no-repeat; background-size: 450px 428px; background-position: top right; padding: 30px 0;}

footer {background: var(--color-primary-dark); color:#fff; font-size:0.938rem; padding: 50px 0; min-height: 200px; /* Sticky footer */}
	footer .fa-brands {font-size: var(--fs-heading2); padding: 0 var(--size-100);}



/* GRIDS: Even Columns and Cards */
.grid-even-columns {
	display:grid;
	gap: 2rem;
}

.grid-even-columns .card-img {max-width:100%; position:relative; padding:0}
.grid-even-columns .card-img img {height:auto; max-width:100%; }
.grid-even-columns .item img {height:auto}


/* GRIDS: Cols*/
/* 512px */
@media only screen and (min-width : 32em) {
}

/* 640px */
@media only screen and (min-width : 40em) {
.grid-even-columns.col-4 {grid-template-columns: repeat(2, 1fr);}
}

/* 800px */
@media only screen and (min-width : 50em) {
}

/* 900px */
@media only screen and (min-width : 56.25em) {
.grid-even-columns.col-2 {grid-template-columns: repeat(2, 1fr);}
}

/* 940px */
@media only screen and (min-width : 58.75em) {
.grid-even-columns.col-4 {grid-template-columns: repeat(3, 1fr);}
.grid-even-columns.col-3 {grid-template-columns: repeat(3, 1fr);}
}

/* 1280px */
@media only screen and (min-width : 80em) {
.grid-even-columns.col-4 {grid-template-columns: repeat(4, 1fr);}
.grid-even-columns.col-10 {grid-template-columns: repeat(10, 1fr);}	
}

/* welcome */
.welcome .item-content	{order:1}
.welcome .item-photo {order:2; justify-self: center;}

/* 900px */
@media only screen and (min-width : 56.25em) {
	.welcome .item-content	{order:2}
	.welcome .item-photo {order:1; justify-self: left;}
}


/* Offers / Team */
.offers .grid-even-columns {margin-bottom: 40px;}
.offers .card, .team .card {color: #fff; max-width:450px; width: 100%; /* for centering */ min-height: 405px; position: relative; overflow: hidden; border-radius: 15px; justify-self: center;}

.offers a:link {display: block; max-width:450px; min-height: 405px;}
.offers .tel a:link {display: inline-block; min-height:auto;}

span.tel {margin-top: var(--size-300); display: inline-block;}

.offers .card-img, .team .card-img {
	max-width:450px; 
	min-height: 405px;
	background-repeat: no-repeat; 
	background-size: 450px 405px;
	background-position: center center;
}
.offers .card-mask, .team .card-mask {position:absolute; bottom: -40px; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); border-radius: 15px; width: 100%;-webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s}
.offers .card:hover .card-mask {bottom:0}
.offers .card-title {margin:0 30px}
.offers .card-content {margin:0 30px}
.offers .card-link {margin:20px 30px;}


.team .card-mask, .team .card:hover .card-mask {top: 280px; padding-bottom: 20px;}
.team .card-mask {height:125px}

.team .tel, .team .formation {color: var(--color-primary); margin-top: var(--size-400); margin-left: var(--size-500);}

.offer .item-1 {
	grid-area: 1 / 1 / 1 / 11;
	z-index: 1;
	align-self: center;
	overflow: visible;
}

.offer .inner {
	background-color: #fff;
	padding: var(--size-500) var(--size-500) var(--size-400) ;
	-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}

.offer .item-2 {
	grid-area: 2 / 1 / 2 / 11;
	align-self: center;
}

.offer.inverted  .item-1 {grid-area: 2 / 1 / 2 / 11;}
.offer.inverted  .item-2 {grid-area: 1 / 1 / 1 / 11;}

/* 900px */
@media only screen and (min-width : 56.25em) {
	.offer .item-1 { grid-area: 1 / 1 / 1 / 6; }
	.offer .item-2 { grid-area: 1 / 6 / 1 / 11; }

	.offer.inverted  .item-1 { grid-area: 1 / 6 / 1 / 11; }
	.offer.inverted  .item-2 { grid-area: 1 / 1 / 1 / 6; }
}

/* 1280px */
@media only screen and (min-width : 80em) {
	.offer .item-1 { grid-area: 1 / 1 / 1 / 7; }
	.offer .item-2 { grid-area: 1 / 6 / 1 / 11; }

	.offer.inverted  .item-1 { grid-area: 1 / 6 / 1 / 11; }
	.offer.inverted  .item-2 { grid-area: 1 / 1 / 1 / 7; }
}




/*** Breadcrumbs ***/
.breadcrumbs .grid-even-columns.col-2 {grid-template-columns: repeat(2, 1fr)}
.breadcrumbs {margin-bottom: var(--size-500);}
.breadcrumbs a:link {font-size: var(--fs-tiny); font-weight: 400;}
.breadcrumbs .item-1 {text-align: left;}
.breadcrumbs .item-2 {text-align: right;}

@media only screen and (min-width : 37.5em) {
.breadcrumbs a:link {font-size: var(--fs-small); font-weight: 400;}	
}





/*** Accordion ***/
.ac {
  margin-bottom: 8px;
  border: 1px solid #eee;
  background-color: #eee;
  border-radius: 5px;
  box-sizing: border-box;
}

.ac .ac-header {
  margin: 0;
  padding: 0;
}

.ac .ac-trigger {
  text-align: left;
  width: 100%;
  padding: 15px 32px 15px 15px;
  display: block;
  cursor: pointer;
  background-color: transparent;
  transition: color 0.25s ease;
  position: relative;
  text-decoration: none;
  margin: 0;
  border: 0;
}

.ac .ac-trigger::after {
  content: "+";
  text-align: center;
  width: 15px;
  transform: translate(0, -50%);
  position: absolute;
  right: 10px;
  top: 50%;
}

.ac .ac-trigger:focus {
  color: var(--color-purple);
}

.ac .ac-panel {
  overflow: hidden;
  transition-property: height, visibility;
  transition-timing-function: ease;
  background-color: #fff;
}

.ac .ac-panel .ac-text {
  padding: 15px;
  margin: 0;
}

.ac.js-enabled .ac-panel {
  visibility: hidden;
}

.ac.is-active .ac-panel {
  visibility: visible;
}

.ac.is-active > .ac-header .ac-trigger::after {
  content: "\2013";
}










/* Contact */
.contact .grid-even-columns div.item:last-child {grid-column: span 2;}



/*** Galleries ***/

/*** Swipebox ***/	
.gallery-swipebox {     
	columns:200px;
	margin:100px var(--size-300);
}

.gallery-swipebox .img {position: relative; text-align: center; overflow: hidden; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s}
.gallery-swipebox .img:hover {transform: scale(1.02);}

.gallery-swipebox img {min-width:100%; height:auto; border-radius: 5px; margin-bottom: 15px;}


/* 630px */
@media only screen and (min-width : 39.375em) {
.gallery-swipebox {columns:420px;}
}

/*
.neutral .green {background:#E5F3D9;}
.neutral .horizontal {max-width: 335px; height: auto;}
*/

/*** Flickity 
.carousel-cell {
	width: 100%; / full width /
	height: 800px; / height of carousel /
	margin-right: 10px;

	/ center images in cells with flexbox /
	display: flex;
	align-items: center;
	justify-content: center;
  }

  .flickity-viewport {
	transition: height 0.2s;
  }

*/

/*** Forms ***/
form {margin:0; padding:0}
/*label {display:block; width:100%; margin:var(--size-200) 0 var(--size-100);}*/

form div {position: relative; margin-bottom: 20px;}


input, select, textarea {
	background: transparent;
	border:#ccc solid 1px;
	width:100%;
	padding:0 15px;
	height: 60px;
	-webkit-border-radius:5; -moz-border-radius:5; border-radius: 5px;	
	outline:none
}

label {
	position: absolute;
	top: 50%;
	left: 10px;
	pointer-events: none;
	transform: translateY(-50%);
	transition: .3s;
	
}

.input-textarea label {top:20px;}

input:focus + label,
input:not(:placeholder-shown) + label,
textarea:focus + label,
textarea:not(:placeholder-shown) + label {
	top: 0;
	font-size: var(--fs-small);
	background-color: #fff;
	padding: 0 10px;
}

textarea {height:200px; padding: 20px 15px; width:100%}

input.cms_submit {background:var(--color-purple); border:var(--color-purple) solid 1px; color:#fff; margin:20px 0 0 0; padding:10px; cursor:pointer; min-width:150px; width:150px}
input.cms_submit:hover {opacity:0.7; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s}

.fb_invalid input, .fb_invalid textarea {color:#f01c26; border:#f01c26 solid 2px;}
.fb_invalid label {color:#f01c26;}

.error_message {display:inline-block; background:#fdf5f5; color:#f01C26; padding:10px 20px; margin-bottom:20px; font-weight:600}
	.error_message ul li:before {color:#f01C26}

div.website, div.website *{display:none !important;visibility:hidden}

.asterisk {color:#f01c26;}

@media only screen and (min-width : 32em) {
	input {max-width:400px}
}


/*** Hero Slider ***/
.slider, .slider div {height:500px}	
	.home .slider, .home .slider div {height:350px}
.slider div.home1 {background:url(../images/header/header_home_01_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.home2 {background:url(../images/header/header_home_02_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.home3 {background:url(../images/header/header_home_03_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.home4 {background:url(../images/header/header_home_04_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}

.slider div.sub1 {background:url(../images/header/header_sub_01_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}	
.slider div.sub2 {background:url(../images/header/header_sub_02_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.sub3 {background:url(../images/header/header_sub_03_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.sub4 {background:url(../images/header/header_sub_04_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.sub5 {background:url(../images/header/header_sub_05_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}

.slider div.ref-gartenfeuer {background:url(../images/header/header_ref_gartenfeuer_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-gewundene-pfade {background:url(../images/header/header_ref_gewundene-pfade_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-fliessende-formen {background:url(../images/header/header_ref_fliessende-formen_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-kleiner-garten {background:url(../images/header/header_ref_kleiner-garten_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-minimalistisch-rustikal-modern {background:url(../images/header/header_ref_minimalistisch-rustikal-modern_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-outdoor-wohnzimmer {background:url(../images/header/header_ref_outdoor-wohnzimmer_S.webp) left bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-rueckzugsort {background:url(../images/header/header_ref_rueckzugsort_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-sanfte-kurven {background:url(../images/header/header_ref_sanfte-kurven_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-versteckte-gartenlounge {background:url(../images/header/header_ref_versteckte-gartenlounge_S.webp) left bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-waerme-trifft-auf-erfrischung {background:url(../images/header/header_ref_waerme-trifft-auf-erfrischung_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-zeitlose-eleganz {background:url(../images/header/header_ref_zeitlose-eleganz_S.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}


@media only screen and (min-width : 64em){
.slider div.home1 {background:url(../images/header/header_home_01_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}	
.slider div.home2 {background:url(../images/header/header_home_02_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.home3 {background:url(../images/header/header_home_03_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.home4 {background:url(../images/header/header_home_04_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}

.slider div.sub1 {background:url(../images/header/header_sub_01_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}	
.slider div.sub2 {background:url(../images/header/header_sub_02_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.sub3 {background:url(../images/header/header_sub_03_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.sub4 {background:url(../images/header/header_sub_04_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.sub5 {background:url(../images/header/header_sub_05_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}

.slider div.ref-gartenfeuer {background:url(../images/header/header_ref_gartenfeuer_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-gewundene-pfade {background:url(../images/header/header_ref_gewundene-pfade_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-fliessende-formen {background:url(../images/header/header_ref_fliessende-formen_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-kleiner-garten {background:url(../images/header/header_ref_kleiner-garten_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-minimalistisch-rustikal-modern {background:url(../images/header/header_ref_minimalistisch-rustikal-modern_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-outdoor-wohnzimmer {background:url(../images/header/header_ref_outdoor-wohnzimmer_L.webp) left bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-rueckzugsort {background:url(../images/header/header_ref_rueckzugsort_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-sanfte-kurven {background:url(../images/header/header_ref_sanfte-kurven_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-versteckte-gartenlounge {background:url(../images/header/header_ref_versteckte-gartenlounge_L.webp) left bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-waerme-trifft-auf-erfrischung {background:url(../images/header/header_ref_waerme-trifft-auf-erfrischung_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.slider div.ref-zeitlose-eleganz {background:url(../images/header/header_ref_zeitlose-eleganz_L.webp) center bottom no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}




}

@media only screen and (min-width : 64em){
.slider, .slider div {height:400px}		
	.home .slider, .home .slider div {height:550px}
}


@media only screen and (min-width : 80em){
.slider, .slider div {height:500px}	
	.home .slider, .home .slider div {height:670px}
}


@media only screen and (min-width : 120em){
.slider, .slider div {height:600px}
	.home .slider, .home .slider div {height:900px}
}