body {
	font-size: 1em;
	min-height: 817px; 
	background-image: url(../img/bg_badeparadies.jpg);
	background-attachment: fixed;
}
a {
	color: #227ec1;
    text-decoration: none;
}
html, button, input, select, textarea {
    font-family: 'Open Sans', sans-serif;
    color: #696d70;
}
.block {
	max-width:75em;
	margin:0 auto;
}

h1.product--title {
	margin-right: .5em !important;
	width: auto !important;
}

h3 {
	line-height: 2.2em;
}

/* ==========================================================================
   Header
========================================================================== */
header.header-main {
	position:relative;
	/* z-index:100; */
	margin:0;
	height:261px;
	background:url(../img/bg-header.png) center bottom no-repeat;
}


header.header-main .block {
	height:7em;
	position:relative;
	padding:0;
	float: none;
}

header.header-main .branding {
	position:absolute;
	top:0.8em;
	left:1.4286em;
	margin:0;
	z-index:1000;
}

header.header-main .branding img {
	height:auto!important;
    max-height: none;
}

@media (min-width:1700px) {
	header.header-main {
	-webkit-background-size:contain;
	-moz-background-size:contain;
	background-size:100% 261px;
	}
}

@media (max-width:790px) {
	header.header-main {
		margin:0;
		height:105px;
		background: #fff;
	}

	header.header-main .branding {
		top:0.85714em;
		left:50%;
		margin-left:-34px;
	}

	header.header-main .branding img {
		width:68px;
	}
}



#nav li a.cart--link {
	padding: 0 1em;
}

ul.cart {
	position: absolute; 
	right: 0;
	top: 95px;
}
#nav  ul.cart span.cart--display {
	margin: 0;
}
/* ==========================================================================
   Navigation
========================================================================== */
#nav {
	z-index:30;
	overflow:hidden;
}

#nav ul.parent {

}

#nav ul.sub {
	background:#f5f5f5;
	background:rgba(0,0,0,.05);
}

#nav li a {
	display:block;
	padding:0.2em 0;
	color:#676a6c;
	font-weight:bold;
	position:relative;
}

#nav ul.sub a {
	padding:0.2em 1em 0.2em 1.5em;
	font-weight:300;
	font-size:0.875em;
}

#nav form {
	margin:0;
}
#nav ol, #nav li {
	list-style: none;
}


/* ==========================================================================
   Hide/modify Shopware Elements
========================================================================== */
#nav .navigation--entry.entry--notepad, #nav .navigation--entry.entry--account, #nav .icon--basket, .content--breadcrumb {display:none;}

.is--ctl-checkout.is--minimal-header .header-main, .is--ctl-register.is--minimal-header .header-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    border-bottom: none;
    box-shadow: none;
}
.custom-page--content .custom-page--tab-headline {
    margin-top: 3.625rem;
}
.header-main .header--navigation {
    background: transparent;
}
.header-main {
    border-bottom: none;
}
/* ==========================================================================
   Horizontal Version
========================================================================== */


@media (min-width: 791px) {
	#nav {
		padding:0;
		position:absolute;
		z-index:200;
		margin:0;
		overflow:visible;
		width:100%;
		top:0;
	}
	#nav .block {
		position:relative;
	}
	#nav ul.parent {
		margin-left:210px;
		height:75px;
		font-size:0.875em;
		position:relative;
	}
	#nav ul.parent:after {
		content:'';
		display:block;
		width:100%;
		height:1px;
		background:#e5e6e6;
		background-image: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(229,230,230,1) 15%, rgba(229,230,230,1) 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(229,230,230,1)), color-stop(100%,rgba(229,230,230,1)));
		background-image: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(229,230,230,1) 15%,rgba(229,230,230,1) 100%);
		background-image: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(229,230,230,1) 15%,rgba(229,230,230,1) 100%);
		background-image: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(229,230,230,1) 15%,rgba(229,230,230,1) 100%);
		background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(229,230,230,1) 15%,rgba(229,230,230,1) 100%);
		position:absolute;
		bottom:-1px;
	}
	#nav ul.parent > li {
		display:block;
		float:left;
		width:20%;
		position:relative;
	}

	#nav ul.parent > li > a {
		border-top-width:0.4em;
		border-top-style:solid;
		text-transform:uppercase;
		line-height:1em;
		padding-top:1em;
		padding-right:0.5em;
	}

	.blue > a {border-top-color:#378bc5;}
	.orange > a {border-top-color:#de9b2a;}
	.red > a {border-top-color:#f07c4e;}
	.green > a {border-top-color:#6ab040;}
	.grey > a {border-top-color:#696d70;}

	#nav ul.parent > li:hover > a,
	#nav ul.parent > li.hover-effect > a {
		color:#222;
	}
	#nav ul.sub {
		display:none;
	}


	#nav-open-btn,
	#nav-close-btn	{
		display:none;
	}

/* Search Form
   ========================================================================== */
	#nav form {
		position:absolute;
		right:0;
		top:95px;
	}

	#nav form input[type=text] {
		width:150px;
	}

/* Meta Nav
   ========================================================================== */
	#nav .meta {
		position:absolute;
		right:230px;
		top:105px;
		font-size:0.75em;
	}

	#nav .meta li {
		float:left;
		margin-left:1em;
	}

	#nav .meta a {
		font-weight:normal;
	}
	#nav .meta a:hover {
		text-decoration:underline;
	}
}


div#actions button {
	text-align: center;
	width: 25%;
	max-width: 10em;
	margin: 2px 0;
}
div#actions:after {
	clear: both;
	content: "";
	display: table;
}

#actions .actions-btn--coupon-container{
	width: 50%;
	float: left;
}

#actions .actions-btn--coupon-container .actions-btn--coupon {
    width: 50%;
    float: left;
	padding:0 0.2rem;
}


#actions .actions-btn--coupon-container .actions-btn--coupon button {
    text-align: center;
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (max-width: 415px) {
	#actions .actions-btn--coupon-container .actions-btn--coupon button {
		font-size: 50%;
		padding: 0 5%;
	}
}

a.entry--link.entry--trigger.btn.is--icon-left {
	height: 2.5em;
	padding: 0 1.3em;
	display: none;
	position: absolute;
	left: 1em;
	top: 2.5em;
	z-index: 1000;
}

@media (max-width: 790px) {

	body {
		background-image: none;
	}

	a.entry--link.entry--trigger.btn.is--icon-left {
		display: block;
	}
	#actions .actions-btn--coupon-container{
		width: 50%;
		
	}
	
	#actions .actions-btn--coupon-container:last-child{
		margin-bottom:0;
	}
	
	#actions .actions-btn--coupon-container .actions-btn--coupon{
		width: 100%;
		float: left;
		padding-right:0.2rem;
		margin-bottom:0.4rem;
	}
	
	#actions .actions-btn--coupon-container .actions-btn--coupon:last-child{
		margin-bottom:0;
	}
	
	div#actions button {
		width: 100%;
		margin: 0;
		text-align: center;
		max-width: none;
		float: left;
	}
	
	
	
	
	
	
	
	#nav {
		width:100%;
		position:absolute;
		left:0;
		top:0;
		box-shadow: none;
	}
	#nav:not(:target) {
    	z-index: 1;
    	/*height: 0;*/
 	}
	#nav:not(:target) #nav-close-btn {
		display:none;
	}
	#nav ul.parent {
		border-bottom:2px solid #eee;
		border-bottom:2px solid rgba(0,0,0,.1);
	}
	#nav li {
		border-top:1px solid #eee;
		border-top:1px solid rgba(0,0,0,.1);
		position:relative;
	}

	#nav li.active > a:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em #227EC2 solid;
  }

  #nav ul.parent, #nav ul.meta {
  	display: none;
  }

  #nav ul.cart {
	right: 1.5em;
  	top: 2em;
  }

  li.navigation--entry.entry--cart {
	width: 2.5em;
  }

  #nav ul.cart span.cart--display , #nav ul.cart span.cart--amount {
  	display: none;
  }

  #nav ul.cart span.badge {
  	display: none;
  }

  #nav ul.cart i.icon--basket {
  	display: block;
  	font-size: 1em;
  } 

  #nav li a.cart--link {
  	padding: 1.2em;
  }

	#nav ul.parent > li {
		border-top:1px solid #eee;
		border-top:1px solid rgba(0,0,0,.1);
		border-left:5px solid #666;
	}

	#nav ul.parent > li.blue {border-left-color:#378bc5;}
	#nav ul.parent > li.orange {border-left-color:#de9b2a;}
	#nav ul.parent > li.red {border-left-color:#f07c4e;}
	#nav ul.parent > li.green {border-left-color:#6ab040;}
	#nav ul.parent > li.grey {border-left-color:#696d70;}

	#nav ul.parent > li > a {
		font-weight:bold;
		padding-left:0.5em;
		text-transform:uppercase;
	}


	#nav-open-btn,
	#nav-close-btn {
		position:absolute;
		top:0.5em;
		left:0.5em;
	}

/* Meta Navi
   ========================================================================== */

#nav .meta {
	margin-top:2em;
}

#nav .meta li a {
	font-weight:normal;
	font-size:0.875em;
	padding-left:1em;
}


/* Search Form
   ========================================================================== */
	#nav form {
		padding:0.5em 0.4em;
		background:#666;
	}
	#nav form input[type=text] {
		width:14em;
	}
	#nav form .btn {
		width:3em;
	}
	#nav form .input-append {
		margin:0;
	}

/* ==========================================================================
   No-JS-Version
========================================================================== */
/*#nav {
	z-index:300;
	box-shadow:0 3px 10px rgba(0,0,0,.5);
}
*/
#nav ul.parent {
	background:#fff;
}

/* ==========================================================================
   JS-Version
========================================================================== */

  .js #nav {
    /* height: 100%; */
    width: 16.625em;
    background: #fff;
		-webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.2);
		height:auto;
		padding-top:0;
		left: -19em;
  }

	.js #nav form {
		-webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
	}

  .js #nav ul.parent {
		background:transparent;
  }
  .js-nav #inner-wrap {
    left: 19em;
  }

	.js #nav-close-btn {
		display:none;
	}



	/* Overlay
   ========================================================================== */
	 .overlay {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:999;
		cursor:not-allowed;
		display:none;
	}

	.js-nav .overlay {
		display:block;
	}

/* ==========================================================================
   Enhance with Transitions
========================================================================== */

/* Initial Nav and Wrap status
   ========================================================================== */
	.csstransforms3d.csstransitions.js #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
		-webkit-perspective: 1000;
  }
  .csstransforms3d.csstransitions.js #inner-wrap {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
		-webkit-perspective: 1000;
  }

	.csstransforms3d.csstransitions.js #inner-wrap,
	.csstransforms3d.csstransitions.js header,
	.csstransforms3d.csstransitions.js #map,
	.csstransforms3d.csstransitions.js [role=main] {
		-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
		-webkit-perspective: 1000;
	}




/* Wrap Transition
   ========================================================================== */
  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(16.625em, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(16.625em, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(16.625em, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(16.625em, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(16.625em, 0, 0) scale3d(1, 1, 1);
		box-shadow: -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  }

/* Additional Nav-Transition
   ========================================================================== */

	.csstransforms3d.csstransitions.js #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 1;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.7, 0.7, 0.7);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.7, 0.7, 0.7);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.7, 0.7, 0.7);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.7, 0.7, 0.7);
    transform: translate3d(70%, 0, 0) scale3d(0.7, 0.7, 0.7);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }

  .csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
   	-moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
  }




}


/* ==========================================================================
   Side Navi
========================================================================== */

.side-navi {
	background:#fff;
	padding:20px;
	font-size:0.875em;
	margin-bottom:10px;
}

.side-navi h3 {
	margin:0 0 5px;
	font-size:1em;
	font-weight:bold;
	text-transform:uppercase;
	color:#696d70;
	padding:5px 20px;
	border-bottom-width:4px;
	border-bottom-style:solid;
}

.blue .side-navi h3 {border-bottom-color:#378bc5;}
.orange .side-navi h3 {border-bottom-color:#de9b2a;}
.red .side-navi h3 {border-bottom-color:#f07c4e;}
.green .side-navi h3 {border-bottom-color:#6ab040;}
.grey .side-navi h3 {border-bottom-color:#696d70;}

.side-navi h3 i {
	display:none;
}

.side-navi ul {
	list-style-type:none;
}
.side-navi li {
	border-top:1px solid #dadbdb;
}
.side-navi li:first-child {
	border-top:none;
}

.side-navi li a {
	display:block;
	color:#575a5c;
	padding:6px 10px 6px 20px;
	text-indent:-10px;
}

.side-navi li a:hover {
	background:#f5f5f5;
}

.side-navi > ul > li > a {
	font-weight:bold;
	font-style:italic;
}
.side-navi > ul > li.active > a {
	background:#eeefef;
}
.side-navi li ul {
	border-top:1px solid #dadbdb;
}
.side-navi li ul li {
	padding-left:10px;
}

@media (max-width: 980px) {
	.side-navi > ul {
		display:none;
	}

	.side-navi h3 {
		text-indent:-10px;
		cursor:pointer;
	}

	.side-navi h3 i {
		display:inline;
		padding-left:-20px;
		font-size:1.2em;
		padding-right:10px;
	}
}

@media (min-width: 981px) {
	.side-navi > ul {
		display:block!important;
	}
}



/* ==========================================================================
   register/checkout
========================================================================== */
.register--content {
	width: 100%;
}

.steps--container {
    background-color: #eaeaea;
}
.steps--content {
    padding: 0;
}
.steps--entry.is--active {
    background-color: #fff;
}
.steps--content .steps--entry {
    padding: 1em;
}

/* ==========================================================================
   Footer
========================================================================== */


footer.footer-main {
	background:#eeefef !important;
	z-index:1000;
	position:relative;
}

footer.footer-main .block {
	padding:0.5em 1.428em;
	background:#eeefef !important;
}

.footer-branding {
	float:left;
}

.footer-branding img {
	max-width:100%;
	height:auto!important;
}

.footer-nav {
	font-size:0.75em;
	margin-top:1em;
}

.footer-nav li {
	display:inline-block;
	*display: inline;
  /* IE7 inline-block hack */
	padding-left:1em;
}

.footer-main .container {
	background:#eeefef !important;
}

/* Icon Nav
   ========================================================================== */

.icon-nav {
	margin-top:0.5em;
	font-size:0.875em;
}

.icon-nav > a,
.icon-nav .share-trigger {
	color:#666;
	font-size:1.4em;
	padding-right:0.75em;
	display:inline;
	position:relative;
}
.icon-nav > a:hover,
.icon-nav .share-trigger:hover {
	color:#227EC1;
}

footer form {
	margin:5px 20px 0 0;
}

footer h2 {
	color:#227EC1!important;
}


@media (max-width: 1140px) {
	.f-clear.right,
	.f-clear.left,
	.footer-branding {
		float:none;
		margin-bottom:1em;
		clear:both;
	}
}

@media (max-width: 770px) {
	.footer-nav {
		clear:both;
		float:none!important;
		display:block;
		margin:1em -1.428em;
		border-top:1px solid #ccc;
	}

	.footer-nav li {
		display:block;
		border-bottom:1px solid #ccc;
		padding:0.5em 1.428em;
	}

	.footer-nav li a {
		border:none;
	}
}





.icon-share:before {
	content: "\f045";
}
.icon-feed:before {
	content: "\72";
}




.navbar .brand {
	font-size: 16px;
	padding: 0;
	line-height: 40px;
	color: #000000;
	float: right;
	font-weight: bold;
	margin-left: 20px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 255, 255, 0.125);
}

#main-container {
	margin-top: 40px;
	margin-bottom: 40px;
}

.api-buttons {
	margin-top: 20px;
}

.api-buttons > a {
	margin-right: 10px;
}

.price {
	font-size: 25px !important;
	line-height: 26px !important;
}


/* Print Styles
================================================================== */
@media print {
    footer.footer-main {
        display:none;
    }
    .entry--cart {
        display:none;
    }
}

.register--content {
	display: block !important;
}

/* Image Presets
================================================================== */



.coupon-images-container-box img {
	cursor: pointer;
	display: inline;
	width: 100%;
	height: auto;
	border: 1px solid #000;
}

#coupon-images-container::after {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0px;
}

.coupon-images-container-box {
	display: inline-block;
	box-sizing: border-box;
	width: 33.33%;
	float: left;
	padding: 1.2%;
	height:95px;
}

@media (max-width: 1220px) {
	.coupon-images-container-box {
		width: 33.33%;
	}
}

@media (max-width: 1024px) {
	.coupon-images-container-box {
		width: 20%;
	}
}

@media (max-width: 790px) {
	.coupon-images-container-box {
		width: 25%;
	}
}

@media (max-width: 550px) {
	.coupon-images-container-box {
		width: 33.33%;
	}
}

@media (max-width: 400px) {
	.coupon-images-container-box {
		width: 50%;
	}
}

#coupon-images p {
	font-weight: bold;
	margin-bottom: 5px;
}

#inputImage {
	display: none;
}

#inputImageButton {
	background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
	border: 1px solid #999;
	border-radius: 3px;
	padding: 5px 8px;
	cursor: pointer;
	text-shadow: 1px 1px #fff;
	font-weight: 700;
	font-size: 10pt;
}