.groupselect { display: block; list-style: none; text-align: justify;
	margin: 0; padding: 0 }
.groupselect * { text-align: left }
.groupselect li { display: inline-block; width: 31%; list-style: none;
	vertical-align: top; margin: 0 0 10px 0; padding: 0 }
.groupselect li a { color: inherit; text-decoration: inherit; display: block }
.groupselect .name { display: block; height: 2.4em;
	padding: 2px 4px; line-height: 1.2em; position: relative;
	color: white; /* overflow: hidden;
	white-space: nowrap; text-overflow: ellipsis */ }
.groupselect .image { display: block; text-align: center }
.groupselect .image img { max-width: 100%; width: auto; height: auto }

.productlist { margin: 0 0 1em 0 }
.productlist .product + .product { border-top: 1px solid #ccc }
.productlist .product:after { display: block; content: ''; height: 0;
	clear: both }
.productlist .product a { color: inherit; text-decoration: inherit;
	display: block; padding: .5em 0 }
.productlist .product .image { float: left; width: 90px; height: 3em;
	margin-right: 10px; text-align: center; line-height: 3em;
	margin-bottom: 1px }
.productlist .product .image img { max-width: 100%; max-height: 100%;
	width: auto; height: auto; border: none; vertical-align: middle }
.productlist .product .desc { /* max-height: 3em; */ line-height: 1.5em;
	/* overflow: hidden; */ width: 530px; width: calc(100% - 100px);
	display: block; float: right }
.productlist .product .desc .name { font-weight: bold }
.productlist .product .desc .artno { text-align: left; display: block;
	float: right; width: 29%; font-weight: bold; font-size: .85em }
.productlist .product .desc .name,
.productlist .product .desc .shortdesc { /* white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis; */ max-width: 100%;
	display: inline-block; width: 70%; float: left }

.productdetails { position: relative }
.productdetails:after { display: block; content: ''; height: 0; clear: both }
.productdetails .archivearticle { color:#3e9ea6; }
.productdetails h2 { margin: 0 }

div.images { width: 66%; float: left }
div.images .bigimage { text-align: center }
div.images .bigimage img { max-width: 100%; width: auto;
	height: auto }
.smallimages img { max-height: 40px; border: 1px solid #ccc }

div.info { width: 30%; min-width: 12em; float: right; padding: 0 0 5px 0 }
div.info p.artno { font-size: 1.1em }
div.info p.artno span.ean { font-size: .88em }
div.info table td, div.info table th { text-align: left; border: none;
	padding: 2px 10px 2px 0; font-size: 80% }

.tabs { clear: both; padding-top: 5px }

table.logistics { border-collapse: collapse; margin: 0 10px 10px 10px }
table.logistics td, table.logistics th { border: 1px solid #ccc;
	padding: 3px 6px; text-align: center; vertical-align: middle }
table.logistics td.first, table.logistics th.first { border-left: none;
	text-align: left }
table.logistics td.last, table.logistics th.last { border-right: none }
table.logistics tr.first td, table.logistics tr.first th { border-top: none }
table.logistics tr.last td, table.logistics tr.last th { border-bottom: none }

div.secs { text-align: justify }
div.secs div.sec { width: 30%; margin: 0; display: inline-block;
	vertical-align: top }
div.sec > h3 { margin: 10px 0 13px; font-weight: normal; font-size: 100%;
	color: white; padding: 5px 10px; position: relative;
	border-bottom: 2px solid white }
.groupselect .arrow,
div.sec > h3 > .arrow { display: block; position: absolute;
	width: 19px; height: 13px; background-repeat: no-repeat;
	bottom: -13px; left: 20px; z-index: 100; }

div.similarproducts { text-align: justify }
div.similarproducts > .empty { height: 0 }
div.similarproducts > .empty,
div.similarproducts > .product { display: inline-block; text-align: left;
	vertical-align: top; width: 49%; background: #9d9ea0; color: white }
div.similarproducts > .product { border: 1px solid #9d9ea0;
	margin-bottom: 10px }
div.similarproducts > .product > a { display: block;
	color: inherit; text-decoration: inherit }
div.similarproducts > .product > a > .image { width: 40%; background: white;
	text-align: center; float: left; line-height: 85px }
div.similarproducts > .product img { max-width: 100%; max-height: 100%;
	margin: 0 auto; vertical-align: middle }
div.similarproducts > .product > a,
div.similarproducts > .product > a > .image,
div.similarproducts > .product > a > .desc { height: 85px; overflow: hidden }
div.similarproducst > .product .pnr { font-weight: bold }
div.similarproducts > .product > a > .desc { display: block;
	padding: 5px 10px }
div.similarproducst > .product > a > .desc > * { display: block; padding: 0 }
div.similarproducts > .product > a > .desc > .desc { display: none }

div.accessorygroup h3 { font-size: 100%; padding: 5px 10px; color: white }
div.accessorygroup table.products { width:100%; border-collapse:collapse; }
div.accessorygroup table.products td { padding:0; border: none;
    border-top:1px solid #ccc; vertical-align:top; }
div.accessorygroup table.products tr:first-child td { border-top:none; }
div.accessorygroup table.products a { text-decoration:none; color:inherit; }
div.accessorygroup table.products td.image { text-align:center; width:1px;
    padding:5px; }
div.accessorygroup table.products td.image img { height:auto; width:75px;
	max-width: none }
div.accessorygroup table.products td.pnr { width:1px; white-space:nowrap; }
div.accessorygroup table.products td.pnr a { display:block; padding:10px; }
div.accessorygroup table.products td.name a { display:block; padding:10px; }

#filterbutton { display:none; }
#filterbutton a { display:inline-block; padding:5px 20px; color:#fff;
	text-decoration:none; background-color:#58585a; line-height:13px; }
#productfilter { margin-bottom:20px; }
.prodfilter { border-bottom: 1px solid #607890; margin: 0.5em 0;
	line-height: 1em; padding: 0 0 .5em 0; font-size:12px; }
.prodfilter:after { display: block; content: ""; width: 0; height: 0;
	overflow: hidden; clear: left; }
.prodfilter .prodfiltername { font-weight: bold; color: #607890 }
.prodfilter .opt { display: block; float: left; }
.prodfilter .opt > input { margin-right: .7em }
.prodfilter label { color:#000; font-weight:bold; }
.prodfilter label.disabled { color:#888; font-weight:normal; }

.prodfilter.step1  .opt { width:  50px; }
.prodfilter.step2  .opt { width: 100px; }
.prodfilter.step3  .opt { width: 150px; }
.prodfilter.step4  .opt { width: 200px; }
.prodfilter.step5  .opt { width: 250px; }
.prodfilter.step6  .opt { width: 300px; }
.prodfilter.step7  .opt { width: 350px; }
.prodfilter.step8  .opt { width: 400px; }
.prodfilter.step9  .opt { width: 450px; }
.prodfilter.step10 .opt { width: 500px; }

.ajaxloader { height:100px; background:url(ajax-loader.gif) 50% 50% no-repeat; }

.detailsoverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	min-height: 100vh; z-index: 100 }
.detailsoverlayshade { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, .6); }
.detailsoverlaycontent { text-align: center; position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; padding: 20px; pointer-events: none }
.detailsoverlaycontent:before { content: ''; display: inline-block;
	vertical-align: middle; width: 1px; height: 100%; margin-right: -1px }
.detailsoverlayele { display: none }
.detailsoverlaycontent .detailsoverlayele { display: inline-block;
	vertical-align: middle; pointer-events: auto }
#atr-popup { padding: 20px; background: white; color: #222; font-size: 14px;
	text-align: left }
#atr-popup .atr-name { font-weight: bold; font-size: 1.5em }
#atr-popup p img { max-height: 2em; width: auto; vertical-align: middle }
#atr-popup .atr-big { font-weight: bold; font-size: 1.3em }
#atr-popup p { margin: .7em 0 }

@media only screen and (max-width: 800px) {
	table.logistics { font-size: 11px }
	div.similarproducts > .product { width: 90% }
}

@media only screen and (max-width: 750px) {
	.productdetails > .images { width: 50% }
	/* .productdetails > .info { width: 100% } */
}

@media only screen and (max-width: 700px) {
	div.secs > div.sec,
	.groupselect li { width: 45% }
	#menu > li:hover > ul,
	#menu > li > ul:hover { display: none }
	table.logistics { font-size: 10px; margin-right: 10px }
	table.logistics td, table.logistics th { padding: 1px }
	.logistics-wrapper { max-width: 100%; overflow-x: auto }
	.productlist .desc { font-size: 11px }
}

@media only screen and (max-width: 600px) {
	.productdetails > .images { width: 100% }
}