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

@font-face {
	font-family: 'HelveticaNeue-Bold';
	src: url('fonts/HelveticaNeue-Bold/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/HelveticaNeue-Bold/HelveticaNeue-Bold.otf')  format('opentype'),
	url('fonts/HelveticaNeue-Bold/HelveticaNeue-Bold.woff') format('woff'), url('fonts/HelveticaNeue-Bold/HelveticaNeue-Bold.ttf')  format('truetype'), url('fonts/HelveticaNeue-Bold/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
}

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

* {
	font-family: HelveticaNeue-Light;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0px;
	border:0px;
	border-collapse:collapse;
	font-weight: normal;
	webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust:none;
    outline 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html,body {
	background-color: #EEEBF4;
	padding:0px;
	margin:0px;
	height:100%;
	width:100%;
}

h1,h2,h3,h4,p{
	margin: 0px;
	color: #777181;
	font-weight: normal;
}

h2{
    font-size: 18px;
    font-family: HelveticaNeue-Bold;
	margin-bottom: 10px;
}

b, strong, th{
	font-family: HelveticaNeue-Bold;
	font-weight: normal;
}

p{
	margin: 16px 0px;
}
p:first-child{
	margin-top: 0px;
}
p:last-child{
	margin-bottom: 0px;
}

a{
	text-decoration: underline;
	color: #777181;
	font-weight: normal;
}

a:hover{
	text-decoration: none;
}

td{
	color: #777181;
}

td h4{
	font-family: HelveticaNeue-light;
	font-weight: normal;
}

li{
	list-style: none;
	font-weight: normal;
}

header{
	height: calc(100% - 86px);
	width: 100%;
	background-color: #AA9BCA;
}

/* ------Head Flexslider------ */
.headslider {
	width: 100%;
	height: 100%;
	position: relative;
}

.headslider .slides {
	min-height: 100%;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0px;
}

.headslider .slides li, .flex-viewport{
	height: 100% !important;
}


.headslider .fleximg{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.headslider .fleximg img{
	display: none;
}

.headslider .flex-control-nav{
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
	z-index: 2;
}

.headslider .flex-control-nav li{
	margin: 0 6px;
	display: inline-block;
	zoom: 1;
}

.headslider ol{
    padding: 0px;
}

.headslider ol li a {
    width: 12px;
    height: 12px;
    color: transparent;
    border: 1px solid #FFF;
    display: block;
}

.headslider a.flex-active {
    background-color: #FFF;
}

/* ------Navigation------ */
#navigation{
	position: absolute;
	width: 100%;
	background-color: #FFF;
	position: relative;
}

#navlogo{
	height: 85px;
	width: 184px;
	position: absolute;
	z-index: 1;
}

#navlogo img{
	margin: 8px;
	margin-left: 40px;
	height: 70px;
	position: absolute;
}

#facebook img{
	position: absolute;
	right: 45px;
	top: 34px;	
	height: 18px;
	width: auto;	
	z-index: 1;
}

nav {
	height: 46px;
	position: relative;
	list-style:none;
	margin:0px;
	padding:20px;
	text-align:center;
	-webkit-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.06);
	-moz-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.06);
	box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.06);	
	background-color: #FFF;
}

nav:before, nav:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 0px;
  width: 50%;
  top: 80%;
  max-width:300px;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 12px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
nav:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 0px;
  left: auto;
}

nav ul{
	margin:0;
	padding:0;
}

nav li{
	display:inline;
	margin:0;
	padding:0;
}

nav li a{
	text-decoration: none;
	font-family: DejaVuSerif;
	display:inline-block;
	padding: 13px 20px 0px 20px;
}

nav li#selected a, nav li#subSelected a{
	color: #9982AE;
}

#subnav{
	background-color: #DDD7EB;
	margin: 0px;	
	height: 27px;
}

#subnav:before, #subnav:after{
	top: 75%;
}

nav ul ul.active{
	display: inline-block;
}

#hamburger{
	position: absolute;
	height: 36px;
	display: none;
	top: 25px;	
	left: 50%;
	margin-left: -18px;	
	z-index: 2;
}

#subnav ul{
	text-align: left;	
}

	#subnav ul li{
		text-align: center;
	}

	#subnav ul li a{
		padding-top: 0px;
	}

	nav > img{
		position: absolute;
		height: 10px;
		top: 100%;
		display: block;
		left: 0px;			    
		z-index: 1
	}	

/* ------Main------ */
main {
	width: 100%;
	min-height: calc(100% - 85px);
	padding-top:85px;
}

section aside{
	/*margin-top: 60px;*/
	height: 500px;
	background-size: cover;
	background-position: center center;
}

section aside img{
	display: none;
}

section aside #googleMap img{
	display: block;
}

section aside #googleMap *{
	font-size: 11px;
	font-family: Roboto, Arial, sans-serif;
	line-height: normal;
}

section aside iframe, section aside #googleMap{
	width: 100% !important;
	height: 100% !important;
}





/*----------Article DEFAULT------------*/

.default{
	width: 800px;
	margin: 0 auto;
	padding: 85px 0px;
}

main section h1{
	font-family: HelveticaNeue-Bold;
	font-size: 30px;
	text-align: center;
	background-color: #AA9BCA;
	color: #FFF;
	width: 500px;
	margin: 0 auto;
	margin-bottom: 65px;
	min-height: 37px;
    line-height: 37px;
	padding: 25px 0px;
	-webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.21);
	-moz-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.21);
	box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.21);
}

.default > ul{
	padding-left: 20px;
}

.default li{
	color: #777181;
}

.default li:before{
	display: inline-block;
    content: "-";
    width: 16px;
    margin-left: -16px;
    margin-top: -1px
}

/*----------Article longtext------------*/

.longtext{
	width: 100%;
	table-layout: fixed;
}

.longtext td{
    vertical-align: top;
	margin: 0px;
	color: #777181;
	width: calc(50% - 20px);
    padding-right: 20px;
	text-align: justify;
}

.longtext td:last-of-type{
	padding-right: 0px;
    padding-left: 20px;
}

.longtext li{
	color: #777181;
}

.longtext li:before{
	display: inline-block;
    content: "-";
    width: 16px;
    margin-left: -16px;
    margin-top: -1px
}

/*----------Article pricelist------------*/

.pricelistwrap{
	overflow-x: auto;
}

.pricelist{
	width: 100%;
	table-layout: fixed;
	min-width: 600px;
}

.pricelist tr:first-child td, .pricelist tr:first-child th{
	font-family: HelveticaNeue-Bold;
	font-weight: normal;
}

.pricelist th, .pricelist td{
	border-bottom: 1px solid #AA9BCA;
	padding-top: 10px;
	padding-bottom: 15px;
	vertical-align: top;
}

.pricelist td:first-child, .pricelist th:first-child{
	padding-left: 20px;
}

/*----------Section MAXWIDTH------------*/

.maxwidth {	
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 85px;
}
.maxwidth:first-child{
	padding-top: 85px;
}

.maxwidth:after{
	content: "";
	display: block;
	clear: both;
}

.maxwidth article{
	float: right;
	width: calc(100% - 623px);
	margin: 0 20px 0 0;
	padding: 0px;	
}

.maxwidth aside{
	width: 563px;
	margin-right: 40px;
	height: 550px;
	float: right;
	background-size: cover;
	background-position: center center;
}

.maxwidth li{
	color: #777181;
}

.maxwidth li:before{
	display: inline-block;
    content: "-";
    width: 16px;
    margin-left: -16px;
    margin-top: -1px
}


/*----------Home Seite (Titel Seite)------------*/

/*----------Compare------------*/

#compare{
	margin-top: 120px;
	width: 800px;
}

#compare h2{
	color: #000;
}

#compare h3{
	margin-top: 55px;
	line-height: 30px;
	font-size: 22px;
	text-align: center;
	color: #FFF;
	font-family: HelveticaNeue-Bold;
	margin-bottom: 10px;
}

#compare p{
    line-height: 22px;
    font-size: 14px;
    text-align: center;
    width: 50%;
    color: #FFF;
    margin: 0 auto;
}

#compare div.row{
	width: 100%;
	padding-top: 50px;
}

#compare div.row:first-of-type{
	padding-top: 0px;
}

#compare div.row:nth-of-type(2n){
	padding-top: 0px;
}

#compare div.row:after{
	content: "";
	display: block;
	clear: both;
}

#compare div.row div.contentRow:first-of-type{
	margin-right: 10px
}
#compare div.row div.contentRow:last-of-type{
	margin-left: 10px;
}

#compare img, .kuchen{
	width: 100%;
	height: 100%;
}

 #compare div.contentRow{
 	position: relative;
 	float: left;
 	width: calc(50% - 10px);
 }

 #compare img{
 	position: absolute;
 	top: 0px;
 	object-fit: cover;
 }

.colorCov{
	width: 100%;
	height: 300px;
	background-color: rgba(170, 155, 202, 0.87);	
	position: absolute;
	top: 0px;

}

#compare img.eye {
	width: 80px;
	height: auto;
	left: calc(50% - 40px);
	top: 60%;
}

/*----------Galerie------------*/

.gallery h2{
	line-height: 19px;
	font-size: 16px;
	text-align: center;
	color: #FFF;
	font-family: HelveticaNeue-Bold;
	margin-bottom: 10px;
	padding-top: 70px;
}

.gallery h3{
    line-height: 22px;
    font-size: 14px;
    text-align: center;
    width: 50%;
    color: #FFF;
    margin: 0 auto;
}

.gallery img{
	display: none;
}

	.gallery > #flexslider{
		display: none;
		width: 100%;
		position: relative;
		overflow: visible !important;
	}

		.gallery > #flexslider > img{
			position: absolute;
			right: 0px;
			cursor: pointer;
			z-index: 3;
			width: 25px !important;
		}

		.gallery > #flexslider > div{
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			height: 65px;
			width: 35px;
			position: absolute;
			top: 50%;
			transform:translateY(-50%);
			cursor: pointer;
			z-index: 3;
		}

		.gallery > #flexslider > ul > li:before{
			content: none;
		}

			.gallery > #flexslider > div#flexLeft{
				background-image: url("/templates/web/img/arrow_left.png");
				left: -60px;
			}
			.gallery > #flexslider > div#flexRight{
				background-image: url("/templates/web/img/arrow_right.png");
				right: -60px;
			}

			.gallery > #flexslider > ul > li > img{
				display: block;
				height: auto;
				margin: 0 auto;
				width: calc(100% - 100px);
			}

	.gallery > #contentGallery{
		width: 100%;
	}
	.gallery > #contentGallery:after{
		content: "";
		display: block;
		clear: both;
	}

		.gallery > #contentGallery li img{
			cursor: pointer;
		}

.galleryImg{
	width: 253px;
	margin: 0px 20px 20px 0px;
	height: 177px;
	list-style-type: none;
	display: block;
	vertical-align: top;
	background-size: cover;
	background-position: center center;
	float: left;
	position: relative;
	cursor: pointer;
}

.galleryImg:before{
	content: none !important;
}

.galleryImg:nth-of-type(3n), #contentGallery a:nth-of-type(3n) .galleryImg{
	margin-right: 0px;
}

.colorCovGallery {
    width: 100%;
    height: 100%;
    background-color: rgba(170, 155, 202, 0.87);    
    position: absolute;
	top: 0px;
	left: 0px;    
}

.colorCovGallery:hover{
	opacity: 0.000001;
}

.flex-prev{
    width: 50px;
    background-image: url("/templates/web/img/left.png");
}


.flex-next{
    width: 50px;
    background-image: url("/templates/web/img/right.png");
}

#closeFs{
	height: auto;
	width: 50px;
	display: inline-block;
}


.slides .gallery img {
    width: 100%;
}

/*----------FORMULAR----------*/


/*----------FOOTER------------*/
footer{
	color: #FFF;
	background-color: #AA9BCA;
	position: static;
	width: 100%;
	padding: 80px 0px;
}

footer div{
	width: 80%;
	margin: 0px auto;
}

footer div div{	
	float: left;
}
footer div div:nth-child(1){
	width: 25%;
}
footer div div:nth-child(2){
	width: 25%;	
}
footer div div:nth-child(3){
	width: 25%;
}
footer div div:nth-child(4){
	width: 25%;
}


footer div div img{
	width: 150px;
}

footer p{
	font-size: 14px;
	line-height: 20px;
	margin: 0px;
	color: #FFF;
}

footer p a{	
	font-size: 14px;
	line-height: 20px;
	margin-top: 0px;
	text-decoration: underline;
	color: #FFF;
}

.slides{
	padding: 0px !important;
	margin: 0px;
}

/*-------EMTPY----------*/

/*}*/


@media only screen and (max-width : 1290px) {
	footer div div:nth-child(1){
		width: 25%;
	}
	footer div div:nth-child(2){
		width: 25%;	
	}
	footer div div:nth-child(3){
		width: 25%;
	}
	footer div div:nth-child(4){
		width: 25%;		
	}
	
}

@media only screen and (max-width : 1000px) {
	main{
		min-height: 0;
	}

	.default, .maxwidth{
		width: calc(100% - 40px);
		margin: 0px auto;
	}

	#compare{
		width: 100%;
	}

	footer div div:nth-child(1){
		width: 30%;
	}
	footer div div:nth-child(2){
		width: 35%;	
	}
	footer div div:nth-child(3){
		width: 35%;
	}
	footer div div:nth-child(4){
		margin-top: 20px;
		width: 30%;
		margin-left: 30%;
	}	

	#hamburger{
		display: block;
	}	

	nav ul{
		display: none;
		z-index: 1;
		position: absolute;		
		left: 0px;
    	top: 85px;
    	background-color: #fff;
    	width: 100%;
    	padding-bottom: 20px;
	}	

	nav li{
		display: list-item;
	}

	nav li a{
		padding-top: 20px;
	}

	nav > img{
		display: none !important;
	}

	.maxwidth article{
		width: 100%;
		margin: 0px;
		margin-bottom: 16px;
	}

	.maxwidth aside{
		display: inline-block;
		background-image: none !important;
		width: 100%;
		margin: 0px;
		text-align: center;
		height: auto;
	}
	.maxwidth aside img{
		display: inline-block;
		max-height: 300px;
		width: auto;
		max-width: 450px;
	}

	#subnav{
		height: auto;
	}
	#subnav ul{
		display: block;
		position: static;
		background-color: transparent;
		margin: 0px !important;
		padding: 0px;
	}

	#subnav ul li a{
		padding-top: 20px;
	}
	#subnav ul li:first-child a{
		padding-top: 0px;
	}

	.galleryImg{
		width: calc(50% - 10px);
	}
	.galleryImg:nth-of-type(3n), #contentGallery a:nth-of-type(3n) .galleryImg{
		margin-right: 20px;
	}

	.galleryImg:nth-of-type(2n), #contentGallery a:nth-of-type(2n) .galleryImg{
		margin-right: 0px;
	}

	.gallery > #flexslider > div{
		display: none;
	}

	#subnav:before, #subnav:after{
		top: 89%;
	}
}

@media only screen and (max-width : 790px) {
	#compare img.eye{
		width: 50px;
		left: calc(50% - 25px);
	}
}

@media only screen and (max-width : 750px) {
	footer div div:nth-child(1){
		width: 100%;
		text-align: center;
	}
	footer div div:nth-child(2){
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}
	footer div div:nth-child(3){
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}
	footer div div:nth-child(4){		
		width: 100%;
		text-align: center;
		margin-left: 0px;
	}	
}

@media only screen and (max-width : 620px) {
	#compare h3{
		margin-top: 20px;
	}
}

@media only screen and (max-width : 570px) {
	.galleryImg{
		width: 100%;
		margin-right: 0px;
	}
	.galleryImg:nth-of-type(3n), #contentGallery a:nth-of-type(3n) .galleryImg{
		margin-right: 0px;
	}
}

@media only screen and (max-width : 550px) {
	.default h1{
		width: 100%;		
		font-size: 24px;
	}

	main section h1{
		width: 100%;
		font-size: 24px;
	}

	.maxwidth aside img{
		max-width: 100%;	
	}

	.longtext td{
		display: block;
		width: 100%;		
		padding: 0px;
	}
	.longtext td:last-of-type{
		margin-top: 16px;
		padding: 0px;
	}

	footer div div{
		width: calc(100% - 10px);
		float: none;
		margin: 0px auto;
		margin-top: 10px;
		text-align: center;
	}

	section aside{
		height: 210px;
	}	

}

@media only screen and (max-width : 600px) {
	.colorCov{
		display: none !important;
	}
	nav:before, nav:after{
		display: none;
	}
}

@media only screen and (max-width : 440px){
	#navlogo{
		width: 123px;
	}
	#navlogo img{
		width: 75px;
		height: auto;
		top: 23px;
		margin-top: 0px;
	}
}