/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
with any questions regarding Web Fonts:  http://www.linotype.com
*/
@import url("http://fast.fonts.net/lt/1.css?apiType=css&c=abc2aec7-fd0c-408d-b388-9d7973fccd65&fontids=721263,721281");

@font-face{
	font-family:"AvenirNextLTW01-Regular";
	src:url("/media/fonts/721263/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix");
	src:url("/media/fonts/721263/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"),url("/media/fonts/721263/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"),url("/media/fonts/721263/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"),url("/media/fonts/721263/52a192b1-bea5-4b48-879f-107f009b666f.svg#52a192b1-bea5-4b48-879f-107f009b666f") format("svg");
}

@font-face{
	font-family:"Avenir Next LT W01 Bold";
	src:url("/media/fonts/721281/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix");
	src:url("/media/fonts/721281/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix") format("eot"),url("/media/fonts/721281/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff") format("woff"),url("/media/fonts/721281/890bd988-5306-43ff-bd4b-922bc5ebdeb4.ttf") format("truetype"),url("/media/fonts/721281/ed104d8c-7f39-4e8b-90a9-4076be06b857.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
}

html, body {
	height: 			100%;
}

body {
 	font-family:		"AvenirNextLTW01-Regular", Arial;
	font-size:              11pt;
	background-color:       #ffffff;
  	background-attachment:	fixed;
	margin:                 0;
}

.infobox {
	background-color: 	#ff00ff;
	overflow:			hidden;
	height:			100%;
}

.oben {
	position: 			fixed;
	top: 				0px;
	width:                  100%;
      height: 			140px;
	margin: 			0 auto;
	box-shadow: 		0px 5px 20px rgba(0, 0, 0, 0.4);
	background-color:       #ffffff;
	max-width:              1024px;
	z-index:                1000;
}

#blocker {
	clear:			both;
}

h1, p.titel {
	margin-top:             10px;
      margin-bottom:          20px;
      color:			#000000;
	font-family:		"Avenir Next LT W01 Bold";
}

h2, h3, h4 {
	font-family:		"Avenir Next LT W01 Bold";
      color:			#000000;
	margin-top: 		0px;
}

h1, p.titel {
	font-size:              28pt;
	line-height:            28pt;
}

h2 {
	font-size:              20pt;
	line-height:            18pt;
      color:                  #1a1a18;
}

h3, h4 {
	font-size:              20pt;
      color:                  #1a1a18;
}

h4 {
	border-bottom:          3px solid #ffcc00;
}

a {
	text-decoration:        none;
}

a.button {
	padding:                5px 10px 5px 10px;
	border:                 2px solid #000000;
	color:                  #000000;
      text-transform:		uppercase;
      line-height: 		36pt;
      margin-right:           20px;
      font-size:              12pt;
      font-weight:            bold;
}

a.button:hover {
	background-color:       #ffcc00;
}

.area_white a.button {
	border-color:           #000000;
}

#mitte_white a.regular, #mitte_white a.regular:hover {
	a-background-color:      #ffffff;
	color:                  #ffffff;
}

p {
	line-height:            16pt;
	margin:			0px;
	margin-bottom:          8px;
}

#page {
	max-width:              1024px;
	margin: 			0 auto;
	width:			100%;
}

#logo {
	width:                  auto;
	position:               absolute;
	right:            	30px;
	top:                    20px;
	float:                  right;
}

#menubar {
	background-position:	bottom left;
      height: 			44px;
	max-width:              960px;
	z-index:                100;
}

#menubar_content {
      width: 			90%;
	margin: 			0 35px;
      padding: 			0px;
}

#imagebar {
      height: 			44px;
      max-width:              960px;
}

#imagebar_content {
      width: 			90%;
}

#breadcrumbs {
	font-size:              8pt;
      text-transform:		uppercase;
}

#breadcrumbs a {
	color:			#000000;
      border:                 none;
}

#mitte_white {
      background-color:       #ffffff;
}

.mitte_yellow, #mitte_white {
	margin: 			0 auto;
}

.mitte_yellow {
      background-color:       #ffcc00;
      margin-top: 		140px;
}

.mitte_yellow a, #mitte_white a {
	
}

a.startpage, .buchstaben a {
	font-weight:            bold;
      font-size:              20pt;
	line-height:            28pt;
      color:                  #000000;
      padding:                5px 10px 5px 10px;
}

.mitte_yellow a.text, #mitte_white a.text {
	font-weight:            bold;
      font-size:              14pt;
	line-height:            16pt;
      color:                  #000000;
      padding:                5px 10px 5px 10px;
}

.mitte_yellow ul, #mitte_white ul {
	padding:                0;
}

.refill_product ul, .refill_product, .varianten {
	margin-bottom:         	20px;
	padding: 5px;
}

.refill_product h4 {
	border:                 none;
	margin:                 0;
}

.refill ul {
	list-style-type:		none;
}

.mitte_yellow a:hover {
      color:                  #000000;
	background-color:       #ffffff;
}

.mitte_yellow #breadcrumbs a, .mitte_yellow #breadcrumbs {
      font-size:              11pt;
	font-weight:            normal;
	padding:                0;
}

.mitte_yellow li {
	margin-left:            20px;
	line-height:            20pt;
}

li {
	margin-left:            20px;
	line-height:            20pt;
}

#mitte_white a:hover {
      color:                  #000000;
	background-color:       #ffcc00;
}

#mitte_white a:hover img {
	background-color:       none;
}

.mitte_yellow img.galerie {
	width:			100%;
}

#logo img {
	width:			auto;
	max-width:              241px;
	margin-left: 20px;
}

#varianten a.textlink, #refill a.textlink, #text a.textlink, .refill_product a {
	font-weight:            bold;

      color:                  #000000;
	padding:                2px;
      line-height:		normal;
}

#varianten a.imglink:hover {
	background-color:		#ffffff;
}

.menubox {
	background-color:		#ffcc00;
	height:                 auto;
      float:                  left;
	width:                  auto;
      margin-right:           10px;
	margin-bottom:          10px;
	max-width:              47%;
}

.menubox a {
	color: #ffffff;
}

.menubox h2, .menubox h3, .menubox h4, .menubox p {
      color:                  white;
	margin:                 0 5px 5px;
}

#CWS-boco {
	height: 100%;
}

#copyright {
	background-color:       #ffffff;
}

.text {
	padding: 20px;
}

.social {
	float: 			left;
}

.area_white {
	background-color:       #ffffff;
	color:                  #000000;
}

.footer {
	overflow: 			hidden;
	background-color: 	#efefef;
}

.footer .area_white {
	background-color:       #efefef;
}

.area_white a, .area_white a:visited {
	color:                  #000000;
	font-weight:            bold;
      text-transform:		uppercase;
}

.area_white a:hover {
	color:                  #ffffff;
	background-color:       #000000;
}

.area_white h2 {
	color:                  #000000;
}


.area_black {
	background-color:       #000000;
      color:                  #ffffff;
}

.area_black a, .area_black a:visited {
	color:                  #ffffff;
	padding:                5px 10px 5px 10px;
	font-weight:            bold;
      text-transform:		uppercase;
	border: 			2px solid #ffffff;
}

.area_black a:hover {
	color:                  #000000;
	background-color:       #ffffff;
}

.area_black h2 {
	color:                  #ffffff;
}

/*
Menü
*/

nav {
      font-family:		"AvenirNextLTW01-Regular", Arial;
}

#neu select, #neu option {
	font-family:		"AvenirNextLTW01-Regular", Arial;
      font-family:      	Arial;
	padding:			4px;
	line-height: 		34px;
	font-size:        	11pt;
	border-bottom: 		1px solid #efefef;
}



/*###################*/
/* Beginn Navigation */
/*###################*/

nav, nav ul {
	list-style-type:		none;                   /* Style-Reset */
	margin:			0;
	padding:			0;
}

nav li {
	text-align:             left;
	float:			left;
	margin-right:           10px;
	height:                 30px;
}

nav li ul {                                         /* Normalzustand eingeklappt */
	display:			none;
}

nav li:hover ul {                                   /* Ausgeklappt */
	display: 			block;
}


/*###################*/
/* Styles fuers Auge */
/*###################*/

#navcontainer {
	height:			auto;
	position:			relative;
	z-index:                1000;
	margin-left:            0px;
	margin-top:             6px;
	margin-right:		auto;
	width:                  700px;
	font-size:              11pt;
	text-align:             left;
}

#navcontainer ul li ul {
	text-align:             left;
}

#navcontainer a {
	line-height:		30px;
	font-weight:            bold;
}

nav {
	top:                    5px;
	position:			relative;
}

nav li {
	height: 			auto;
}

nav li:hover {
	background-color:       #000000;
}

nav li:hover a {
	color:       		#ffffff;
}

nav li a {
	color:                  #000000;
}

nav a {
	display:			block;
}

nav li a:hover {
	color:                  #ffffff;
}

nav ul li  {
	padding-left: 		10px;
}

nav ul li ul li, nav ul li ul li a {
	padding-left: 		10px;
	margin-left:            -10px;
}

nav ul li ul li {
	background-color:		#000000;
	width:                  100%;
	height:                 30px;
	border-top:             1px solid #ffffff;
	font-weight:            normal;
	width:                  280px;
}

nav li ul li a:hover {
	background-color:       #ffffff;
	color:                  #000000;
}

/*
Unternavigation
*/

nav ul li ul li   {
	display:			none;
}

nav ul li:hover ul li   {
	display:			block;
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
}

nav ul li:hover ul {
	display:			block;
	position:			relative;
	margin-top:			-12px;
}

nav li {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

nav ul li ul li.second {
	display:			none;
}

nav ul li:hover ul {
	display:			block;
	position:			relative;
	margin-top:			0px;
	margin-left:            0px;
}

nav li.second {
	background-color:       #576979;
}



li.menu_eins {
	width:			90px;
	padding: 			0;
	margin: 			0;
      text-align: 		center;
}

li.menu_zwei {
	width:			110px;
	padding: 			0;
	margin: 			0;
      text-align: 		center;
}

li.menu_drei {
	width:			200px;
	padding: 			0;
	margin: 			0;
      text-align: 		center;
}

li.menu_vier {
	width:			110px;
	padding: 			0;
	margin: 			0;
      text-align: 		center;
}

li.menu_fuenf {
	width:			98px;
	padding: 			0;
	margin: 			0;
      text-align: 		center;
}


#productimage {
	position:               relative;
	right:                  20px;
	float:                  right;
}

.varianten, .refill_product {
	position:               relative;
	left:                  	0px;
	float:                  left;
	margin-right:           20px;
	margin-bottom:          20px;
	width:                  250px;
}

.refill_product a {
	padding:                2px;
}

#refill {
      width:                  48%;
}

#varianten h4, #refill h4 {
	margin-top:             -5px;
}

#varianten ul, #refill ul {
	list-style-type:        	disc;
      list-style-position:		inside;
}



#mitte_white a.downloadlink, #mitte_white a.downloadlink:hover {
      background:				none;
	padding:                	0px;
      margin:                		0px;
}



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

	#menubar_content {
            width: 			100%;
		margin: 			0 0px;
	}

	nav ul {
		display: 			none;
		height: 			auto;
            width: 			100%;
	}

	nav {
		border-bottom: 		0;
		width:                  100%
	}

	nav li {
		float: 			none;
	}

	nav ul li:hover ul li a {
		background-color:       #ff0000;
	}

	nav ul li {
		background-color:		#ffcc00;
	}

	.mitte_yellow, #mitte_white {
      	padding: 			20px;
    	}

	.mitte_yellow a {
		background-color:       #ffcc00;
	}

	.mitte_yellow a.startpage, .mitte_yellow .buchstaben a {
		background-color:       #ffcc00;
		font-size:              14pt;
		line-height:            24pt;
		padding:          	5px;
	}

      .mitte_yellow a.startpage:hover, .mitte_yellow .buchstaben a:hover {
		background-color:       #ffffff;
	}

	#mitte_white a.startpage, #mitte_white .buchstaben a {
		background-color:       #ffffff;
		font-size:              14pt;
		line-height:            24pt;
		padding:          	5px;
	}

      #mitte_white a.startpage:hover, #mitte_white .buchstaben a:hover {
		background-color:       #ffcc00;
	}

	#text a, .mitte_yellow a.imglink, #mitte_white a.imglink,.mitte_yellow a.downloadlink, #mitte_white a.downloadlink {
		border:                 none;
	}
}

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

	.mitte_yellow, #mitte_white {
		padding:          	20px;
	}

	.infobox {
		display: 			flex;
	}

}

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

	.area_white {
      	width:            	50%;
            float:            	left;
	}

	.area_black {
		width:            	50%;
		float:            	right;
	}

}


#mitte_white a.regular {
	border:                 none;
}

a.articlenumber {
	padding:                0;
	margin-right:           0;
	border:                 none;
	line-height:            14pt;
	font-weight:            bold;
	font-size:              12pt;
	color:                  #000000;
      padding:			5px 10px 5px 10px;
}