html { overflow-y: scroll; scroll-behavior: smooth }
body { font-family: Roboto, Arial, sans-serif; font-weight: 300; color: black }
label { font-weight: 300 }

@media (max-width: 1499px) {
	.visible-xlg { display: none }
}

table.logistics { border-collapse: collapse; border: 0 }
table.logistics thead th, table.logistics tbody td {
	font-size: .9em }
table.logistics th, table.logistics td { text-align: center;
	vertical-align: middle; padding: .5em 1em }
table.logistics tbody th { text-align: left; font-weight: normal }
table.logistics th:nth-child(n+2),
table.logistics td:nth-child(n+2) { border-left: 1px solid #c0c0c0 }
table.logistics tbody td { border-top: 1px solid #c0c0c0 }
table.logistics tbody th:first-child { padding-left: 0 }

#logistics .morelogistics { margin-top: 2em }
.morelogistics > div { margin: .3em 0 }

body { min-width: 320px }

body.fixed-header #header { position: relative; padding: 0 }
#header { border-bottom: 1px solid #f2f2f2; position: relative }
#header .header-box { padding: 0 }
#header .header-box .logo-col { padding: 15px 5px 0 10px;
	text-align: left; min-height: 60px;
	font-weight: 500;
	text-transform: uppercase }
#header .header-box .logo-col a { color: inherit;
	text-decoration: none }
#header .header-box .menus-col { float: right }
@media (max-width: 570px) {
	#header .header-box .logo-col { width: 100% }
}
@media (min-width: 571px) {
	#header .header-box .logo-col { width: auto }
}
@media (min-width: 992px) {
	body.fixed-header #header,
	#header { position: sticky; top: 0; z-index: 11; height: 60px }
	#header .header-box .logo-col { text-align: left;
		padding: 5px 5px 5px 30px; width: 32% }
	#header .header-box .menus-col { width: 36% }
	#header .header-box .search-col { width: 32% }
	#header .header-box .menus-col,
	#header .header-box .search-col { margin-bottom: 0 }
	#header .header-box .menus-col { margin-top: 9px }
	#header .header-box .search-col { margin-top: 5px }
}

#header .header-box .search-col > label { cursor: pointer;
	font-size: 14px }
#header .header-box .search-col .input-group {
	width: 80%; width: calc(100% - 110px) }
#header .header-box .search-col { margin-top: 10px; margin-bottom: 10px }
#header .header-box .menus-col { margin-top: 20px; margin-bottom: 10px }
#header .header-box .search-col > label { float: left; width: 110px;
	margin-top: 9px }
@media (max-width: 570px) {
	#header .header-box .search-col,
	#header .header-box .menus-col { margin-top: 10px;
		margin-bottom: 10px }
	#header .header-box .menus-col .menu-dropdowns {
		margin: 5px auto 5px 0; text-align: left }
	#header .header-box .menus-col .menu-dropdowns .btn-group {
		margin-left: 0; menu-right: 30px }
	#header .header-box .menus-col .menu-dropdowns .btn-group
		button { padding-left: 0 }
}
@media (min-width: 992px) {
	#header .header-box .search-col { margin-top: 7px; margin-bottom: 0 }
	#header .header-box .menus-col { padding-right: 30px;
		margin-top: 12px; margin-bottom: 0 }
}
@media (min-width: 1280px) {
	/* #header .form.search { width: 35vw } */
}
@media (min-width: 992px) {
	#maincats > ul { overflow: auto; max-height: calc(100vh - 100px) }
}

#maincats ul, #maincats li { display: block; list-style: none;
	margin: 0; padding: 0 }
#maincats > ul { padding: 10px 0; display: flex; font-size: 13px }
#maincats > ul > li > a { font-weight: 500 }
#maincats > ul { position: absolute; top: 100%; width: 700px;
	z-index: 2000; background: white; max-width: 100%;
	left: 210px; left: calc(50% - 350px); border: 1px solid #c0c0c0 }
#maincats > ul > li { display: inline-block; width: 33%;
	box-sizing: border-box; padding: 20px;
	vertical-align: top }
#maincats > ul > li > ul { padding-top: 6px }
#maincats > ul > hr { margin: 0 20px }
#maincatstoggle { position: absolute; top: -2000px; left: -2000px }
#maincatstoggle + ul { display: none }
#maincatstoggle:checked + ul { display: block }
@media (max-width: 991px) {
	#maincats > ul { left: 0 }
}
@media (max-width: 570px) {
	#maincats > ul > li { width: 100% }
}

#header .search-col form .input-group {
	box-shadow: 0 0 3pt rgba(0, 0, 0, .16) }
#header .search-col #searchParam { border: 0;
	border-right: 0; border-radius: 0; box-shadow: none;
	color: #7f7f7f }
#header .search-col button { background: white; color: #7f7f7f;
	border: 0; border-radius: 0 }
/* #header .search-col button::before { content: ''; display: block;
	width: 1px; height: 70%; background: #eee;
	position: absolute; top: 15%; left: 0 } */
#header .search-col { font-size: 12px }

#header .menus-col .badge { background: #002c52; font-size: 93% }
#header .menus-col .menu-dropdowns > .btn-group { margin-left: 20px }
#header .menus-col .menu-dropdowns > .btn-group > .btn {
	font-size: inherit; font-weight: inherit; color: inherit }

#header.c202012 > .box { line-height: 60px; vertical-align: middle;
	padding: 0 15px; font-size: 13px }
#header.c202012 > .box > div { padding: 12px; line-height: 36px }
#header.c202012 > .box > div > * { line-height: 1.3 }
#header.c202012 .shoplogo-col { width: 210px }
#header.c202012 .mainnav-col { width: 100% }
#header.c202012 .mainnav-col a,
#header.c202012 .mainnav-col label { font-weight: normal;
	display: inline-block; margin: 0 15px }
#header.c202012 .mainnav-col a:hover,
#header.c202012 .mainnav-col label:hover {
	text-decoration: underline; color: inherit }
#header.c202012 .search-menu-col { text-align: right }
#header.c202012 .mainnav-col label { cursor: pointer }
#header.c202012 .search-menu-col img { width: auto; max-height: 15px }
#header.c202012 .search-menu-col form.search button,
#header.c202012 .search-menu-col > div > button { background: transparent;
	padding: 3px; margin: 0 2px; border: 0; color: black }
#header.c202012 .search-menu-col form.search { display: inline-block;
	margin-top: 0; vertical-align: middle; position: relative;
	padding: 0 }
#header.c202012 .search-menu-col form.search button {
	position: absolute; right: 3px; top: 2px }
#header.c202012 .search-menu-col form.search input {
	width: 140px; height: 30px; border-color: #f2f2f2;
	box-shadow: none }
#header.c202012 .search-menu-col form.search input:focus {
	background: inherit; border-color: inherit }
#header.c202012 .search-menu-col .mmhsearchhints {
	min-width: 300px; left: auto !important; right: 0 !important;
	line-height: 1.3; text-align: left }
#header.c202012 .search-menu-col .mmhsearchhints img {
	max-height: 100% }
@media (min-width: 992px) {
	#header.c202012 > .box > div { float: left }
	#header.c202012 .mainnav-col { width: calc(100% - 480px) }
	#header.c202012 .search-menu-col { width: 260px }
}

#header #maincats div.caticon { width: 100%; height: 4em;
	background: transparent no-repeat 50% 50%; background-size: cover;
	margin-bottom: .4em }

#startslider { color: black; overflow: hidden;
	position: relative }
#startslider > div > .row + .row { display: none }
#startslider .dd-background { background-size: cover }
#startslider .dd-hero-inner { padding: 30px 15px; margin: 0 auto }
#startslider .dd-hero-holder { padding: 30px 0; text-align: left;
	background: transparent }
/* #startslider .dd-hero-box h1,
#startslider .dd-hero-box p { text-shadow: 0 0 5px rgba(0, 0, 0, .8) } */
#startslider .dd-hero-box h1 { font-size: 40px; font-weight: 500;
	margin: 0 }
#startslider .dd-hero-box p { font-size: 20px; opacity: 1; margin: 15px 0 }
#startslider .dd-hero-box a.btn { border: none; border-radius: 0;
	font-size: 12px; font-weight: normal; text-transform: none;
	padding: 15px; opacity: 1 }
@media (min-width: 768px) {
	#startslider .dd-hero-inner { max-width: 750px }
	#startslider .dd-hero-holder { padding: 60px 0 }
}
@media (min-width: 992px) {
	#startslider .dd-hero-inner { max-width: 970px; padding: 100px 15px }
}
@media (min-width: 1200px) {
	#startslider .dd-hero-inner { max-width: 1170px; padding: 135px 15px }
}

#startslider.js > div > .row { display: block; position: absolute;
	top: 0; left: 0; transform: translate3d(150%, 0, 0);
	width: 100%; padding: 0; margin: 0; float: none }
#startslider.js > div > .row > div { margin: 0; padding: 0 }
/* #startslider.js > div > .row .dd-hero-box { padding: 80px 0 } */
#startslider.js > div > .row.contentslider-first {
	transform: translate3d(0, 0, 0) }
#startslider.js > div > .row.contentslider-show {
	animation: contentslider-show 400ms ease both }
#startslider.js > div > .row.contentslider-hide {
	animation: contentslider-hide 400ms ease both }
#startslider.js > div > .row.contentslider-show.contentslider-backward {
	animation-name: contentslider-show-backward }
#startslider.js > div > .row.contentslider-hide.contentslider-backward {
	animation-name: contentslider-hide-backward }

@keyframes contentslider-hide {
	from { transform: translate3d(0, 0, 0) }
	to { transform: translate3d(-100%, 0, 0) }
}
@keyframes contentslider-show {
	from { transform: translate3d(100%, 0, 0) }
	to { transform: translate3d(0, 0, 0) }
}
@keyframes contentslider-hide-backward {
	from { block; transform: translate3d(0, 0, 0) }
	to { transform: translate3d(100%, 0, 0) }
}
@keyframes contentslider-show-backward {
	from { transform: translate3d(-100%, 0, 0) }
	to { transform: translate3d(0, 0, 0) }
}

#startslider > a { display: none }
#startslider.js > a { position: absolute; width: 30px;
	height: 30px; border-radius: 32px; overflow: hidden;
	/* background: #b3c6c8; */
	/* background: rgba(134, 174, 179, .7); */
	background: transparent no-repeat 50% 50%;
	color: white; /* top: 50%; */ bottom: 5px;
	text-align: center; font-size: 20px; line-height: 20px;
	text-decoration: none; /* padding: 12px; */ cursor: pointer;
	/* transition: background-color 300ms ease */ }
/* #startslider.js > a:hover { background-color: #86aeb3 } */
#startslider.js > a.left { left: 15px;
	background-image: url(../../img/slide-left-white.png) }
#startslider.js > a.right { right: 15px;
	background-image: url(../../img/slide-right-white.png) }
#startslider.js > .dots { position: absolute; bottom: 15px;
	height: 1.5em; text-align: center; left: 0; width: 100%;
	display: none; font-size: 7px }
#startslider.js > .dots > .dot { display: inline-block;
	vertical-align: middle; margin: 0 1em; background: white;
	border-radius: 1000px; width: 1em; height: 1em;
	transition: all 200ms ease; cursor: pointer; opacity: .8 }
#startslider.js > .dots > .dot.sel { width: 1.3em; height: 1.3em;
	opacity: 1 }

@media (min-width: 768px) {
	#startslider.js > a { display: block }
	#startslider.js > .dots { display: block }
}
@media (min-width: 992px) {
	#startslider.js > a { bottom: auto; top: 50% }
}

#headerpic { margin-top: -1px; position: relative }
#headerpic img { width: 100%; height: auto; display: block }

.underdog { padding-bottom: 2em }

#footer { color: black; border: 0; background-color: #f2f2f2;
	font-size: 11px; line-height: 1.7; padding: 20px 0 }
#footer h4,
#footer .footer-box-title { text-transform: uppercase;
	font-size: 1em; font-weight: 500;
	padding: 0; margin: .2em 0 }
#footer hr { border-color: #d9d9d9 }
#footer a + .langselect { margin-left: 4em }
#footer ul, #footer li { display: block; margin: 0; padding: 0; list-style: none }
#footer p { padding: 0; margin: 0 }
#footer > .container > .row > div { padding-top: 10px; padding-bottom: 10px }

#footer form.form-inline #footer_newsletter_oxusername {
	background: transparent; border-radius: 0; width: 12em;
	border: 1px solid #bfbfbf; box-shadow: none;
	margin-right: -1px; display: inline-block;
	vertical-align: top }
#footer form.form-inline #footer_newsletter_oxusername:focus {
	background: white; color: black !important /* doh... */ }
#footer form.form-inline button.btn { background: black;
	color: white; border-radius: 0; border: 1px solid black }
#footer form.form-inline #footer_newsletter_oxusername,
#footer form.form-inline button.btn { font-size: inherit;
	padding: .5em; line-height: 1.3; height: 2.3em }
#footer .footer-box-newsletter .small { font-size: 100% }

#searchParam::placeholder { color: #7f7f7f }
#searchParam::placeholder,
#footer_newsletter_oxusername::placeholder {
	font-style: normal; font-size: 12px }
#searchParam::-moz-placeholder,
#footer_newsletter_oxusername::-moz-placeholder {
	font-style: normal; font-size: 12px }
#searchParam::-webkit-input-placeholder,
#footer_newsletter_oxusername::-webkit-input-placeholder {
	font-style: normal; font-size: 12px }
#searchParam:-ms-input-placeholder,
#footer_newsletter_oxusername:-ms-input-placeholder {
	font-style: normal; font-size: 12px }

#wrapper .dd-background { background-size: cover }
/* #wrapper .dd-hero-box { min-height: 300px } */
#wrapper .dd-hero-box .dd-hero-inner .dd-hero-holder { height: 300px }
#wrapper .dd-hero-box h1 { font-size: 16px; font-weight: 500; margin: 0 0 5px 0 }
#wrapper .dd-hero-box p { font-size: 14px; opacity: 1; margin: 0 0 5px 0 }
#wrapper .dd-hero-box a.btn { /* border: 1px solid #333;
	border-radius: 0; color: #333; */
	border: none; border-radius: 0; margin-top: 12px; padding: 0;
	font-size: 14px; font-weight: 300; opacity: 1 }
#wrapper .dd-hero-box .dd-hero-inner .dd-hero-holder {
	padding: 40px /* 30px */ 11.5% }

.dd-shortcode-videohero .bgvideo { position: absolute;
	overflow: hidden; width: 100%; height: 100% }
.dd-shortcode-videohero .bgvideo > video { position: absolute;
	min-width: 100.9%; min-height: 100.9%; width: auto; height: auto;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	object-fit: cover; object-position: center }
.dd-shortcode-videohero .dd-hero-inner { position: relative }

.breadcrumb { font-size: 12px; margin: 1.5em 0 1em 0 }
.breadcrumb .text-muted { color: #ccc }
.breadcrumb > li + li::before { content: '|'; padding: 0 10px }
.breadcrumb > li a { color: #ccc }
.breadcrumb > li.active a { color: black }
#details .breadcrumb { margin-top: .5em; margin-bottom: 4em }

.refineParams.bottomParams { text-align: left; margin-top: 2em }
.pagination > li > a, .pagination > li > span { border: 0;
	color: black; font-size: 12px }

.pagination-options .btn { border-radius: 0; background: white;
	border: 1px solid #c0c0c0; color: black }
.pagination-options .showtitle { font-weight: bold; font-size: 1.25em;
	margin-left: -15px; line-height: 35px }
.pagination-options .btn:hover { background: #eee }
.pagination-options .btn strong { font-weight: normal }

.pagination-options .numproducts { display: inline-block;
	vertical-align: middle; font-size: 85%; color: black;
	padding-left: 10px; padding-right: 10px;
	text-align: center }
@media (max-width: 768px) {
	.pagination-options .numproducts { width: 100% }
}
.listRefine .pagination-options .numproducts { margin-bottom: 5px }

#latestList .categorybar,
#articledata .category-title { margin: 2em 0 1em 0; padding: .4em 1em;
	font-weight: bold }

.boxwrapper .list-container .lineView { margin-top: 0 }
.boxwrapper .list-container .lineView .productBox { min-height: 115px }
.boxwrapper .list-container .lineView + .lineView .productBox:first-child {
	min-height: 130px }
.boxwrapper .list-container .lineView .productBox.extended { min-height: 145px }
.boxwrapper .list-container .lineView + .lineView .productBox.extended:first-child {
	min-height: 160px }
.boxwrapper .list-container .lineView .productBox form {
	border-bottom: none }
.boxwrapper .list-container .lineView + .lineView .productBox:first-child form {
	padding-top: 15px;
	border-top: 1px solid #bfbfbf }
/* lieber border-left auf dem rechten Element
.boxwrapper .list-container .lineView .productBox form
.row .col-md-2 + .col-md-6 { border-right: 1px solid #c0c0c0 }
*/
.boxwrapper .lineView .productBox { font-size: 85% }
/* .boxwrapper .lineView .productBox .title { margin-bottom: 1em } */
.boxwrapper .lineView .productBox .artnum { margin-bottom: 1em }
.boxwrapper .lineView .productBox .artnum + .abctype {
	margin: -1em 0 1em 0 }
@media (min-width: 992px) {
	.boxwrapper .lineView .productBox .pricebasket {
		border-left: 1px solid #c0c0c0 }
}
.boxwrapper .lineView .productBox .price { min-height: 30px;
	text-align: right; font-size: 14px;
	font-weight: 600; display: block; margin-bottom: 0 }
.boxwrapper .lineView .productBox .price .plus-vat {
	display: block; font-weight: 300; font-size: 12px }
.boxwrapper .list-container .lineView .productBox
.functions .price { font-weight: 600 }
.boxwrapper .lineView .productBox .availability {
	line-height: 1.1em; height: 1.1em }
.boxwrapper .list-container .lineView .productBox
.functions .form-group { margin-top: 5px }
.boxwrapper .lineView .productBox .availability { font-weight: normal }

.boxwrapper .list-container .lineView
.productBox > form.with-removeButton { padding-bottom: 45px;
	position: relative }
.boxwrapper .lineView .removeButton { position: absolute;
	bottom: 5px; right: 0; width: auto }

.boxwrapper .categorybar { font-size: 85%; font-weight: bold;
	padding: .3em 1.2em; margin-bottom: 10px }

#articledata > .col-sm-3 > * { margin-bottom: 20px }

.cat-tree { margin-bottom: 20px }
.filter > ul,
.cat-tree > ul, .cat-siblings > ul { font-size: 85% }
.cat-tree .title,
.cat-siblings .title { font-weight: bold; font-size: 1.25em;
	margin-bottom: 10px; line-height: 35px }
.cat-tree li.act > a,
.cat-tree li.act > span,
.cat-siblings li.act > a { font-weight: 600 }
/*
.cat-siblings ul,
.cat-tree ul { list-style: none; margin: .3em 0; padding: 0 }
.cat-siblings ul > li,
.cat-tree ul > li { list-style: none; display: block;
	position: relative; margin: 0; padding: 0 0 0 1.2em }
.cat-siblings ul > li::before,
.cat-tree ul > li::before { content: '•'; display: block; position: absolute;
	top: 0m; left: .2em }
*/
.cat-tree ul, .cat-siblings ul,
.details-col-middle ul,
.detailsRelated ul { padding: 0 0 0 1.2em; list-style: outside disc }

/*
.filter ul, .filter li,
.cat-tree ul, .cat-tree li,
.cat-siblings ul, .cat-siblings li { list-style: none }
.filter ul,
.cat-tree ul,
.cat-siblings ul { padding: 0; margin: 0; line-height: 1.6 }
.cat-tree ul ul { padding-left: 1.2em }
.filter li,
.cat-tree li,
.cat-siblings li { padding-left: 0 }
.filter li a,
.cat-tree li a,
.cat-tree li > span,
.cat-siblings li a { display: block;
	padding-left: 1.2em; position: relative }
.cat-tree li span.numhits { font-weight: bold }
.filter li a::before,
.cat-tree li a::before,
.cat-tree li > span::before,
.cat-siblings li a::before { content: ''; display: block;
	position: absolute; top: .5em; left: 0em;
	height: .6em; width: .6em;
	border: 1px solid #a6a6a6; background: white }
.filter li.act > a::before,
.cat-tree li.act > a::before,
.cat-tree li.act > span::before,
.cat-siblings li.act > a::before { background: black }

.cat-tree li a::before,
.cat-tree li > span::before,
.cat-siblings li a::before { height: .35em; width: .35em; left: .25em;
	top: .6em; background: black; border-color: black;
	border-radius: .35em }
*/
.filter ul, .filter li { list-style: none }
.filter ul { padding: 0; margin: 0; line-height: 1.6 }
.filter li { padding-left: 0 }
.filter li a { display: block;
	padding-left: 1.2em; position: relative }
.filter li a::before { content: ''; display: block;
	position: absolute; top: .5em; left: 0em;
	height: .6em; width: .6em;
	border: 1px solid #a6a6a6; background: white }
.filter li.act > a::before { background: black }

.box.sidebar_um_search { border: none; background: transparent;
	border-radius: 0; margin-bottom: 0; font-size: 85% }
.box.sidebar_um_search.well-sm { padding: 0; border-radius: 0 }
.box.sidebar_um_search.well { box-shadow: none }
.filters-title,
.box.sidebar_um_search .title { font-weight: bold;
	font-size: 1.47em /* 1.25em */ }
.filter .title,
.box.sidebar_um_search .group-title { font-weight: bold;
	margin: 1.5em 0 .2em 0 }
.box.sidebar_um_search .group-title .click-area::after {
	display: table; clear; both }
.box.sidebar_um_search .group-title .area-title {
	float: left; width: 90%; cursor: pointer }
.box.sidebar_um_search .group-title .area-toggle-arrow {
	float: right; width: 9%; cursor: pointer }
.box.sidebar_um_search ul.um_search_facette {
	margin: 0; padding: 0; list-style: none }
.box.sidebar_um_search ul.um_search_facette > li {
	list-style: none; margin: 0; height: auto;
	padding: 0 0 0 1.2em; position: relative; line-height: 1.6;
	overflow: hidden }
.box.sidebar_um_search .um_search_facette .aggregation_checkbox,
.box.sidebar_um_search .um_search_facette .filter-keyword {
	float: none; font-size: 1em; position: static }
.box.sidebar_um_search .um_search_facette
label { margin: 0 }
.box.sidebar_um_search .um_search_facette
input[type=checkbox] { width: 2px; height: 2px;
	position: absolute; top: -50px; left: -300px }
.box.sidebar_um_search .um_search_facette
span.filter-keyword::before { content: ''; display: block;
	position: absolute; top: .5em; left: 0em;
	width: .6em; height: .6em;
	border: 1px solid #a6a6a6; background: white }
.box.sidebar_um_search .um_search_facette
input[type=checkbox]:checked +
span.filter-keyword::before { background: black }
.umremovefiltercontainer { display: none }

.flexslider .flex-viewport { margin-left: 30px; margin-right: 30px;
	padding-bottom: 1px }
.flexslider .flex-direction-nav .flex-prev { left: 0 }
.flexslider .flex-direction-nav .flex-next { right: 0 }
.flexslider .flex-direction-nav .flex-prev,
.flexslider .flex-direction-nav .flex-next { width: 30px;
	height: 30px; background: rgba(0, 0, 0, 0);
	text-align: center }
.flex-direction-nav a { margin-top: -15px; outline: none }
.flexslider .flex-direction-nav .flex-prev:hover,
.flexslider .flex-direction-nav .flex-next:hover {
	background: rgba(0, 0, 0, .3); color: black }
.flexslider .flex-direction-nav .flex-prev::before,
.flexslider .flex-direction-nav .flex-next::before {
	color: #bfbfbf; transition: all 200ms ease; font-size: 14px;
	line-height: 30px; padding: 0; margin: 0 }
.flexslider .flex-direction-nav .flex-prev:hover::before,
.flexslider .flex-direction-nav .flex-next:hover::before {
	color: black }
.flexslider:hover .flex-direction-nav .flex-prev { left: 0 }
.flexslider:hover .flex-direction-nav .flex-next { right: 0 }
.flexslider .slides > li { text-align: center }
.flexslider .slides > li img { margin: 0 auto }

#pagenav-top { padding-top: 12px; padding-bottom: 12px;
	padding-left: 15px;
	position: relative; overflow: hidden;
	font-size: 12px; line-height: 1.3; color: black;
	font-weight: 300; text-align: left; background: #f2f2f2 }
#pagenav-top .logo { display: none }
#pagenav-top-spacer { margin-bottom: 15px }
#donotuse #pagenav-top::before { content: ''; display: block; height: 1px;
	box-shadow: 0 0 20px black /* rgba(0, 0, 0, .9) */;
	position: absolute; top: 0; left: 0; width: 100% }
#pagenav-top a { display: inline-block; margin: 0 7px 0 0 }
@media (min-width: 768px) {
	#pagenav-top { padding-left: 10px; padding-right: 10px }
}
@media (min-width: 992px) {
	#pagenav-top { padding-left: 30px }
	#pagenav-top { top: 60px; position: sticky; z-index: 10 }
	#pagenav-top-spacer { margin-bottom: 30px }
	#pagenav-top.fixedpos { position: fixed; top: 60px; left: 0;
		width: 100%; z-index: 10; padding-left: 220px }
	#pagenav-top.fixedpos .logo { display: block; width: auto;
		height: 100%; top: 0; left: 0; background: #3e9aa6;
		color: white; text-align: center; padding: 10px 15px;
		position: absolute }
	#pagenav-top.fixedpos .logo img { height: 3em; width: auto }
}
@media (min-width: 1200px) {
	#pagenav-top-spacer { margin-bottom: 0 }
}

body.cl-details #morePicsContainer img { max-width: 90px }
body.cl-details #productTitle { font-weight: normal; color: black;
	margin-bottom: .8em }
body.cl-details #productPrice .plus-vat { display: block;
	font-size: 14px; font-weight: 300 }
body.cl-details #productPrice .priceerr { font-size: 14px; color: #333 }
body.cl-details #productPriceDiscount { display: block;
	margin-top: -10px; margin-bottom: 10px }
body.cl-details #productPriceDiscount::before { content: '(' }
body.cl-details #productPriceDiscount::after { content: ')' }
#detailsMain > div > .row { border-bottom: none }
#detailsMain .artnum,
#detailsMain .ean { font-size: 13px; font-weight: 500 }
#detailsMain .artnum span,
#detailsMain .ean span { font-weight: 300 }
#detailsMain .action-links { font-size: 85% }

@media (min-width: 992px) {
	#detailsMain .detailsInfo .details-col-middle { padding-left: 40px }
}
@media (min-width: 1200px) {
	#detailsMain .detailsInfo .details-col-left { padding-right: 40px }
}

@media (min-width: 992px) {
	#details #description .text.twocol { columns: 2;
		column-gap: 2.5em }
}

#relprods h3.relprods,
#detailsRelated h3 { position: relative; font-weight: normal; color: black }
#relprods h3.relprods::before,
#detailsRelated h3::before { background: #bfbfbf; width: 100%; height: 1px;
	top: 50%; left: 0; display: block; content: ''; position: absolute }
#relprods h3.relprods > span,
#detailsRelated h3 > span { background: white; display: inline-block;
	padding-right: .4em; position: relative }
@media (min-width: 992px) {
	#relprods h3.relprods,
	#detailsRelated h3 { margin-top: 30px; margin-bottom: 20px }
}
@media (min-width: 1200px) {
	#relprods h3.relprods,
	#detailsRelated h3 { margin-top: 50px; margin-bottom: 30px }
}

#detailsRelated .downloads h4 { font-size: 12px; /* color: white;
	background: #002c52; padding: .5em 1em; */ font-weight: bold }
#detailsRelated .downloads ul { margin: 0 0 10px 0; padding: 0 0 0 1.2em }
@media (min-width: 1200px) {
	#detailsRelated .downloads .col-md-3 { width: 20% }
}

.mmhsearchhints { display: none }
.mmhsearchhints .tpl { display: none }

.mmhsearchhints.show { display: block; position: absolute;
	width: 500px; max-width: 80vw; border: 1px solid #ccc;
	background: white; color: #111; z-index: 2001;
	font-size: 10px }
.mmhsearchhints .line { position: relative; padding-left: 80px;
	min-height: 50px }
.mmhsearchhints .line::after { content: ''; display: table; clear: both }
.mmhsearchhints .line + .line + .line { border-top: 1px solid #ccc }
.mmhsearchhints .line .img { width: 80px; height: 50px;
	position: absolute; top: 0; left: 0 }
.mmhsearchhints .line .text { padding: .2em .5em;
	box-sizing: border-box; min-height: 50px }
.mmhsearchhints .line .img img { width: 100%; height: 100%;
	object-fit: contain; display: block }
.mmhsearchhints .line .artnum { font-weight: bold }
.mmhsearchhints .line a { text-decoration: none; color: inherit }
.mmhsearchhints .line:hover .text { background: #eee }

/* .subcatList .panel-body { text-align: center } */
.subcatList .subcatbox .img { min-height: 140px;
	padding: 5px; text-align: center;
	border: 1px solid #c0c0c0 }
.subcatList .subcatbox .title { min-height: 4em;
	padding: .5em 0; font-weight: bold; font-size: 12px }
.subcatList .subcatbox .title a { color: inherit }

.subcatList.c202101 .img { border: 0; padding: 0 }
.subcatList .img img { width: 100%; height: auto }
.subcatList.c202101 .title { text-align: center; font-weight: 500;
	font-size: 13px; margin-bottom: 10px }
.subcatList.c202101 .parentcat { color: #bfbfbf; text-transform: uppercase;
	margin-bottom: -.2em }
.subcatList.c202101 .title a { color: #002c52 }

#detailsMain .tobasket .tobasket-qty,
#detailsMain .tobasket .tobasket-button,
#detailsMain .tobasket .btn-towishlist,
#detailsMain .tobasket .login-button,
.boxwrapper .list-container .lineView .productBox
.functions input.amount,
.boxwrapper .lineView .productBox .tobasket-button,
.dd-shortcode-article .actions input[type=number],
.dd-shortcode-article .actions input[type=text],
.dd-shortcode-article .actions button {
	width: 5.5em; height: 3em; font-size: 11px;
	padding: .5em .2em; text-align: center; vertical-align: top;
	border: 1px solid #c0c0c0;
	border-radius: 0 }
#detailsMain .tobasket .tobasket-qty,
.boxwrapper .list-container .lineView .productBox
.functions input.amount { margin-right: .5em }
#detailsMain .tobasket .login-button,
#detailsMain .tobasket .btn-towishlist,
#detailsMain .tobasket .tobasket-button { width: auto;
	padding-left: .7em; padding-right: .7em; line-height: 2em }
#detailsMain .tobasket .login-button { border: none;
	padding-left: 2em; padding-right: 2em }
#detailsMain .tobasket .btn-towishlist,
#detailsMain .tobasket .tobasket-button,
.boxwrapper .lineView .productBox .tobasket-button,
.dd-shortcode-article .actions button { float: none }
#detailsMain .tobasket .btn-towishlist > img,
#detailsMain .tobasket .tobasket-button > img,
.boxwrapper .lineView .productBox .tobasket-button > img,
.dd-shortcode-article .actions button > img { margin-top: -.3em;
	height: 14px; width: auto }
#detailsMain .tobasket .login-button.cc-fi-button { margin-left: 10px }
#detailsMain .btn-towishlist { display: inline-block;
	vertical-align: top; margin-left: 1em }

.dd-shortcode-article { margin-top: 1em; margin-bottom: 1em }
.dd-shortcode-article .listDetails .title { text-align: left;
	font-weight: 600 }
.dd-shortcode-article .price { font-size: 11px;
	font-weight: 600; text-align: left }
.dd-shortcode-article .price .lead { font-size: inherit;
	font-weight: inherit }
.dd-shortcode-article .price .artnum { font-size: 10px }
.dd-shortcode-article .actions { text-align: left }
.dd-shortcode-article .actions .btn-group { display: inline }
@media (min-width: 992px) {
	.col-sm-4 .dd-shortcode-article { font-size: 11px }
	.col-sm-4 .dd-shortcode-article .picture { width: 49%;
		display: inline-block; vertical-align: middle;
		padding-right: 10px }
	.col-sm-4 .dd-shortcode-article .listDetails { width: 49%;
		display: inline-block; vertical-align: middle }
	.col-sm-4 .dd-shortcode-article .listDetails.tobasket {
		vertical-align: top }
	.col-sm-4 .dd-shortcode-article::after { content: ''; display: table; clear: both }
	.col-sm-4 .dd-shortcode-article .listDetails .title {
		font-size: 12px }
	.col-sm-4 .dd-shortcode-article .listDetails.tobasket .title {
		height: 6em }
}

.tobasket-qty::-moz-placeholder {
	font-style: normal; font-size: 10px }
.tobasket-qty::-webkit-input-placeholder {
	font-style: normal; font-size: 10px }
.tobasket-qty::-ms-input-placeholder {
	font-style: normal; font-size: 10px }
.tobasket-qty::placeholder {
	font-style: normal; font-size: 10px }

#detailsMain .product-links { margin-top: 10px }
#detailsMain .product-links a { display: inline-block;
	padding: .5em .8em .5em 0 }
#detailsMain .product-links a img { vertical-align: middle }
#detailsMain .product-links
a#questionMail { background: transparent url(../../img/fragen-icon-blau.png)
	no-repeat 0 50%; padding-left: 15px }

#detailsMain p.optqty { margin: 10px 0; width: 26em }
html[lang='cz'] #detailsMain p.optqty,
html[lang='cs'] #detailsMain p.optqty { width: 22em }
#detailsMain p.optqty img { height: 2.4em; float: left; width: auto;
	margin-right: 10px }
#detailsMain p.optqty::after { content: ''; display: table;
	clear: left }

#detailsMain .availablefrom { margin: .5em 0; font-weight: 500 }
#detailsMain .availablefrom label { font-weight: inherit }
/* #detailsMain .availablefrom .date { font-weight: 500 } */


.dropdown-menu { border-color: #c0c0c0;
	box-shadow: none }

.form-control,
.panel,
.panel-default > .panel-heading { border-color: #c0c0c0 }

.well, .well-sm,
.modal-content,
.panel,
.form-control,
.btn,
.dropdown-menu,
.alert { border-radius: 0 }

label.req { font-weight: inherit }
label.req::after { content: '*' }

@media (min-width: 768px) {
	.dropdown-menu .lead { font-size: 19px }
	.dropdown-menu { font-size: 12px }
	.dropdown-menu .btn { font-size: 12px }
}

body.cl-basket table#basket_table .discount,
body.cl-basket table#basket_table .netprice { text-align: right }

#jumptotop { width: 35px; height: 35px; border-radius: 2px;
	background-image: url(../../img/toplink.png);
	background-repeat: no-repeat;
	background-position: 50% 50%; background-size: 13px 13px }
#jumptotop.show { opacity: 1 }

.dd-shortcode-mmhcattree .row { margin-left: 0; margin-right: 0 }

.dd-shortcode-mmhhighlights { margin-bottom: 1em;
	position: relative; overflow: hidden; font-weight: 300 }
.dd-shortcode-mmhhighlights h3 { margin-top: 1em;
	margin-bottom: 1em }
.dd-shortcode-mmhhighlights .categories { display: none }
.dd-shortcode-mmhhighlights.js .categories { font-size: 14px;
	margin: 1em 0; display: block }
.dd-shortcode-mmhhighlights.js .categories .overview,
.dd-shortcode-mmhhighlights.js .categories .sel { font-weight: bold }
.dd-shortcode-mmhhighlights .products { display: flex;
	flex-flow: wrap }
.dd-shortcode-mmhhighlights.js .products { display: block;
	position: relative; margin-left: 23px; margin-right: 23px;
	transition: height 200ms ease, opacity 200ms ease; opacity: 1 }
.dd-shortcode-mmhhighlights.js .products.changeprods {
	opacity: 0 }
.dd-shortcode-mmhhighlights .product:nth-child(n+5),
.dd-shortcode-mmhhighlights .article:nth-child(n+5) { display: none }
.dd-shortcode-mmhhighlights.js .product:nth-child(n+5),
.dd-shortcode-mmhhighlights.js .article:nth-child(n+5) {
	/* reset display for browsers without flex-boxes */
	display: block }
/* .dd-shortcode-mmhhighlights.js .product:nth-child(n+5), */
.dd-shortcode-mmhhighlights.js .article:nth-child(n+5) { display: flex }
/* .dd-shortcode-mmhhighlights .product, */
.dd-shortcode-mmhhighlights .article { display: flex;
	flex-direction: column; margin-bottom: 1em }
.dd-shortcode-mmhhighlights .article .picture { border: 1px solid #f2f2f2;
	margin-bottom: .2em }
.dd-shortcode-mmhhighlights .article .picture img { margin: 0 auto }
.dd-shortcode-mmhhighlights .article .title { flex-grow: 1;
	/* margin-bottom: .7em */ }
.dd-shortcode-mmhhighlights .article .price { height: 1.3em }
.dd-shortcode-mmhhighlights .article .title { font-size: 14px }
.dd-shortcode-mmhhighlights .article .price { font-size: 15px }
.dd-shortcode-mmhhighlights .article .artnum { font-size: 13px }
/* .dd-shortcode-mmhhighlights .article .title, */
.dd-shortcode-mmhhighlights .article .price,
.dd-shortcode-mmhhighlights .article .artnum { font-weight: bold }

.dd-shortcode-mmhhighlights.js .product.hide,
.dd-shortcode-mmhhighlights.js .article.hide { display: none }
.dd-shortcode-mmhhighlights.js .product,
.dd-shortcode-mmhhighlights.js .article { position: absolute; top: 0 }
.dd-shortcode-mmhhighlights.js .article { padding-left: 0; padding-right: 0 }
.dd-shortcode-mmhhighlights.js .anim .product,
.dd-shortcode-mmhhighlights.js .anim .article {
	transition: all 300ms ease-out }
.dd-shortcode-mmhhighlights.js .product.out,
.dd-shortcode-mmhhighlights.js .article.out { opacity: 0; pointer-events: none }
.dd-shortcode-mmhhighlights.js .article .title,
.dd-shortcode-mmhhighlights.js .article .price,
.dd-shortcode-mmhhighlights.js .article .artnum { padding-right: 1em }

.dd-shortcode-mmhhighlights.js .products > .button { position: absolute;
	display: none; background: #f2f2f2 no-repeat center;
	/* border-radius: 1000px; */
	font-size: 20px; font-weight: bold; color: black; text-decoration: none;
	user-select: none; top: 0 /* 50% */; /* top: calc(50% - 15px); */
	padding: 5px; text-align: center; transition: transform 200ms ease;
	cursor: pointer; width: 25px; height: 40px; line-height: 1;
	background-size: 15px }
.dd-shortcode-mmhhighlights.js .products > .button:hover {
	transform: zoom3d(1.1, 1.1, 1) }
.dd-shortcode-mmhhighlights.js .products > .button.left { left: -23px;
	background-image: url(../../img/slide-left-a6.png);
	background-position: 50% 50%;
	/* content: '<' */ }
.dd-shortcode-mmhhighlights.js .products > .button.right { right: -23px;
	background-image: url(../../img/slide-right-a6.png);
	background-position: 50% 50%;
	/* content: '>' */ }
.dd-shortcode-mmhhighlights.js .products.buttons > .button { display: block }

/*
@media (min-width: 900px) {
	.dd-shortcode-mmhhighlights.js .products {
		margin-left: 50px; margin-right: 50px }
	.dd-shortcode-mmhhighlights.js .products > .button.left {
		left: -50px }
	.dd-shortcode-mmhhighlights.js .products > .button.right {
		right: -50px }
}
*/

body.cl-topseller h1,
body.cl-latest h1 { text-transform: uppercase }
body.cl-topseller .cat-tree .title,
body.cl-latest .cat-tree .title { margin-top: 23.8px }
@media (min-width: 992px) {
	body.cl-topseller h1 .refineParams,
	body.cl-latest h1 .refineParams { float: right; font-size: 14px;
		font-weight: normal; text-transform: none }
}

.productlist .categorysubbar { position: relative; font-size: 1.5em;
	margin: .5em 0 1em 0 }
.productlist .categorysubbar::before { content: ''; display: block;
	position: absolute; top: 50%; left: 0; width: 100%;
	height: 1px; background: #bfbfbf }
.productlist .categorysubbar > span { position: relative; display: inline-block;
	background: white; padding-right: .4em }

#latestList .lineView + .lineView .categorybar,
.productlist .lineView + .lineView .col-xs-12:first-child .categorysubbar,
.productlist .lineView + .lineView .categorybar { margin-top: 50px }

#topsellerList { padding-top: 40px }

#topbar { height: 30px; text-align: right; background: #f2f2f2;
	color: black; position: relative }
#topbar div.topbar { padding: 5px 15px; height: 30px; line-height: 20px;
	font-size: 12px; display: inline-block; vertical-align: middle }
#topbar div.topbar p { margin: 0; padding: 0 }
#topbar a { color: inherit }
#topbar.c202012 div.topbar { font-size: 11px; font-weight: normal;
	text-transform: uppercase }
#topbar.c202012 div.companylink { float: left }

#breadcrumbs { padding: 0 15px }
#breadcrumbs #breadcrumb { padding: 12px 0; margin: 0 0 13px 0 }
@media (min-width: 992px) {
	#breadcrumbs { padding: 0 30px }
}

.langselect { line-height: 20px; display: inline-block;
	vertical-align: middle; position: relative; padding-right: 15px }
.langselect label { cursor: pointer }
.langselect label:hover { text-decoration: underline }
.langselect label span { text-transform: uppercase }
.langselect input { position: absolute; left: -4000px }
.langselect .dropdown { display: none }
.langselect input:checked + .dropdown { display: block;
	position: absolute; top: 28px; right: 10px;
	text-transform: uppercase; z-index: 12;
	background: #f2f2f2; padding: 5px 15px 5px 5px;
	text-align: center }
.langselect .dropdown a { display: block; line-height: 20px }
#footer .langselect .dropdown { border: 1px solid #d9d9d9;
	top: auto; bottom: 24px; padding-right: 14px }

.panel-subheading { font-weight: 500; margin: .2em 0 }

table#basket_table th.availability { text-align: center }
table#basket_table td.availability { text-align: center; font-weight: bold }
table#basket_table td.availability .grey { color: #888 }
table#basket_table td.availability .green { color: #2a0 }
table#basket_table td.availability .red { color: #e10 }

.textinpic { position: relative; color: black }
.textinpic.text-light { color: white }
.textinpic.text-light-shadow { color: white;
	text-shadow: .05em .05em .1em rgba(0, 0, 0, .4) }
.textinpic > img { display: block; width: 100%; height: auto }
.textinpic > .textinpic-over { position: absolute; left: 50%; top: 0;
	white-space: nowrap; transform: translate3D(-50%, 0, 0);
	height: 100% }
.textinpic > .textinpic-over:before { content: ''; display: inline-block;
	width: 1px; margin-right: -1px; height: 100%;
	vertical-align: middle }
.textinpic > .textinpic-over > .textinpic-text { display: inline-block;
	vertical-align: middle; white-space: normal; max-width: 400px }

@media(min-width: 1300px) {
	body.c202012 .container { width: 100%; padding-left: 45px; padding-right: 45px;
		max-width: 1690px }
}

.posrel { position: relative }
img.imgblock { display: block }
img.imgcover { object-fit: cover; width: 100%; height: auto; }
.posabsfull { position: absolute; width: 100%; height: 100%;
	top: 0; left: 0; display: block }
.centercontent { text-align: center; white-space: nowrap; font-size: 0 }
.centercontent > * { vertical-align: middle; white-space: normal;
	display: inline-block; font-size: 36px }
.centercontent:before { content: ''; display: inline-block;
	width: 1px; margin-right: -1px; height: 100%;
	vertical-align: middle }

.dd-shortcode-hovereffect { overflow: hidden }
.dd-shortcode-hovereffect .textsub { height: auto; top: auto; bottom: 0;
	text-align: center }
.dd-shortcode-hovereffect.effect-sadie .textsub {
	text-transform: uppercase; opacity: 0; bottom: -5px }
.dd-shortcode-hovereffect.effect-sadie:hover .textsub { opacity: 1;
	bottom: 10px }
.dd-shortcode-hovereffect.effect-sadie .overlay { height: 100% }
.dd-shortcode-hovereffect.effect-sadie:hover .overlay { height: 80% }
.dd-shortcode-hovereffect img,
.dd-shortcode-hovereffect .tinting,
.dd-shortcode-hovereffect .overlay,
.dd-shortcode-hovereffect .borderlr,
.dd-shortcode-hovereffect .bordertb,
.dd-shortcode-hovereffect .border,
.dd-shortcode-hovereffect .glare,
.dd-shortcode-hovereffect .textmain,
.dd-shortcode-hovereffect .textsub { transition: all 350ms ease }

.effect-sadie .tinting { top: 50%; opacity: 0 }
.effect-sadie:hover .tinting { top: 0; opacity: .8 }

.effect-layla .borderlr { height: 0; opacity: 0; width: 80%; left: 10%; top: 6%;
	border-left: 1px solid white; border-right: 1px solid white }
.effect-layla .bordertb { width: 0; opacity: 0; height: 80%; top: 10%; left: 6%;
	border-top: 1px solid white; border-bottom: 1px solid white }
.effect-layla:hover .borderlr { height: 88%; opacity: 1 }
.effect-layla:hover .bordertb { width: 88%; opacity: 1 }
.effect-layla .tinting { opacity: 0.2 }
.effect-layla:hover .tinting { opacity: 0.5 }
.effect-layla .overlay { height: 40% }
.effect-layla:hover .overlay { height: 50% }
.effect-layla .textmain { vertical-align: bottom; padding: 10% 10% 0 10% }
.effect-layla .textsub { height: 50%; top: 50%; opacity: 0; padding: 0 10% 10% 10% }
.effect-layla:hover .textsub { opacity: 1 }
.effect-layla img { transform: perspective(111.11px) translate3d(0, -4.5%, 10px);
	transition: all 300ms ease }
.effect-layla:hover img { transform: perspective(111.11px) translate3d(0, 4.5%, 10px) }

.effect-roxy .overlay { text-align: left; padding-left: 10% }
.effect-roxy .textsub { text-align: left; top: 60%; top: calc(52% + 20px);
	height: 30%; padding: 0 10% 0 5%; text-transform: uppercase; opacity: 0 }
.effect-roxy:hover .textsub { padding-left: 10%; opacity: 1 }
.effect-roxy .border { border: 1px solid white; width: 90%; left: 0;
	height: 90%; top: 5%; opacity: 0 }
.effect-roxy:hover .border { left: 5%; opacity: 1 }
.effect-roxy .tinting { opacity: 0 }
.effect-roxy:hover .tinting { opacity: .4 }
.effect-roxy img { transform: perspective(70px) translate3d(-7%, 0, 10px) }
.effect-roxy:hover img { transform: perspective(70px) translate3d(7%, 0, 10px) }

.effect-apollo .overlay { text-align: left; padding-left: 10%; padding-top: 10% }
.effect-apollo .overlay > * { vertical-align: top }
.effect-apollo .textsub { text-align: right; left: auto; width: 20%; right: 10%;
	opacity: 0; border-right: 4px solid white; padding-right: 8px;
	text-transform: uppercase; bottom: 10%; top: auto; line-height: 1.17 }
.effect-apollo:hover .textsub { opacity: 1 }
.effect-apollo .tinting { opacity: .1 }
.effect-apollo:hover .tinting { opacity: .4 }
.effect-apollo img { transform: perspective(70px) translate3d(0, 0, 5px) }
.effect-apollo:hover img { transform: perspective(70px) translate3d(0, 0, 0) }
.effect-apollo .glare { opacity: 0; transition: all .6s ease }

/* for chrome... */
video:focus { outline: none }
.dd-shortcode-embedvideo video { vertical-align: bottom }

/* reset changes for landingpages from visualcms */
html .dd-ve-landing h1, html .dd-ve-landing .h1 { font-size: 36px }
html .dd-ve-landing h2, html .dd-ve-landing .h2 { font-size: 30px }
html .dd-ve-landing h3, html .dd-ve-landing .h3 { font-size: 24px }
html .dd-ve-landing h4, html .dd-ve-landing .h4 { font-size: 18px }
html .dd-ve-landing p { font-size: 14px; opacity: inherit }
html .dd-ve-landing .dd-shortcode-text h1,
html .dd-ve-landing .dd-shortcode-text h2,
html .dd-ve-landing .dd-shortcode-text h3,
html .dd-ve-landing .dd-shortcode-text h4 { padding: 0 }

/* accordeon effect */
.accordeon h3,
.accordeon-heading { font-size: 14px; font-weight: 500; margin: .5em 0;
	background: #eee; padding: 1em; position: relative }
.accordeon-heading { padding-right: 2.5em }
.accordeon-heading:after { content: '+'; font-size: 24px; position: absolute;
	top: 7px; right: 14px }
.accordeon-heading.open:after { content: '–' }
.accordeon-content { overflow: hidden; margin: 0 }
.accordeon-heading + .accordeon-content { padding: 0 1.2em }
.accordeon-content.trans { transition: height 400ms ease }
.accordeon-content.closed { height: 0 }
.accordeon-content p { margin: .3em 0 }
html .dd-ve-landing h3.accordeon-heading { font-size: 14px; padding: 1em 2.5em 1em 1em }
.dd-background .accordeon-heading { background: transparent; color: white }

.flex-row { display: flex; flex-wrap: wrap }

@media screen and (min-width: 800px) {
	#detailsMain .vendormatrix-buttons { width: 100%; max-width: 100% }
}
#detailsMain .vendormatrix-buttons a.btn { margin-bottom: 10px; font-size: 12px }
#detailsMain .vendormatrix-buttons .row { margin-left: -5px; margin-right: -5px }
#detailsMain .vendormatrix-buttons .row .col-xs-6,
#detailsMain .vendormatrix-buttons .row .col-xs-12 { padding-left: 5px; padding-right: 5px }

#detailsMain .vendormatrix-buttons { padding-top: 2em; padding-bottom: 2em }

.vendormatrix.nav-tabs > li { margin-right: 20px }
@media (min-width: 800px) {
	.vendormatrix.nav-tabs > li { margin-right: 60px }
}
.vendormatrix.dropdown { margin-left: 15px }
.vendormatrix.dropdown > a.btn { width: 210px; font-size: 12px }
.vendormatrix.dropdown ul.dropdown-menu { margin-top: .7em;
	left: auto; right: 0; overflow-y: auto; max-height: 20em;
	background: #eee; border-radius: .5em }
.row.vendorlist { display: flex; flex-wrap: wrap }

.popup { position: absolute; top: 170px; left: 50%; max-width: 90vw;
	padding: 20px; background: #ffffffdd; z-index: 10;
	box-shadow: 0 0 10px rgba(0, 0, 0, .8);
	transform: translate3d(-50%, 0, 0); font-size: 16px }
.popup .closebutton { position: absolute; top: 0; right: 5px; font-size: 20px }
@media (min-width: 800px) {
	.popup { max-width: 500px }
}

.list-checkmark ul { padding: 0; margin: .7em 0; list-style: none }
.list-checkmark ul ul { padding-left: .8em }
.list-checkmark li:before { content: '✔'; position: absolute;
	top: 0; left: .3em }
.list-checkmark li { list-style: none; padding-left: 1.8em;
	position: relative }

.lightover { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	z-index: 2010; text-align: center; pointer-events: none }
.lightover .lighten { position: absolute; top: 0; left: 0; width: 100%;
	height: 100%; background: #ffffff88; pointer-events: auto }
.lightover::before { content: ''; display: inline-block; width: 1px;
	height: 70%; vertical-align: middle; margin-right: -1px }
.lightover .inner { display: inline-block; vertical-align: middle; text-align: left;
	position: relative; padding-left: 150px; background: white;
	pointer-events: auto; border: 1px solid #888 }
.lightover .inner img { width: 150px; height: 100%; object-fit: cover;
	position: absolute; top: 0; left: 0 }
.lightover .inner::after { content: ''; display: inline-block; width: 1px;
	height: 250px; vertical-align: middle; margin-left: -1px }
.lightover .inner .text { padding: 3em 5em; color: #222;
	display: inline-block; vertical-align: middle }
.lightover .inner .close { position: absolute; top: 0; right: 3px; color: #222 }

.lightover.nlsub .lighten { background: #00000088 }
.lightover.nlsub::before { height: 90% }
.lightover.nlsub .inner { padding: 0; max-width: 95%;
	border-radius: 15px }
.lightover.nlsub .inner img { object-fit: contain; width: 300px; display: none }
.lightover.nlsub .inner .text { padding: 3em 4em; max-width: calc(100% - 1em);
	max-height: 60vh; overflow: auto }
.lightover.nlsub .inner::after { height: 400px }
.lightover.nlsub .inner .close { color: white; background: #444;
	width: 1.5em; height: 1.5em; border-radius: 1.5em;
	top: -.5em; right: -.5em; padding: .25em; opacity: 1;
	text-align: center }
@media (min-width: 850px) {
	.lightover.nlsub .inner { width: 800px; padding-left: 310px }
	.lightover.nlsub .inner img { display: block }
	.lightover.nlsub .inner .text { padding-left: 0 }
}

html .no-top-margin { margin-top: 0 }

#basketFlyout { overflow-y: auto; max-height: 60vh }

.amwsinfobox-label { text-decoration: underline;
	font-weight: 500; cursor: pointer }
/* .amwsinfobox-label::after { content: '>'; padding-left: .6em;
	text-decoration: none; display: inline-block } */
.amwsinfobox-label span { display: inline-block; text-decoration: none;
	padding-left: .6em }
.detailsInfo .amwsinfobox-label { font-size: 13px }
.amwsinfobox { position: fixed; display: block; padding: 1em;
	width: 100%; bottom: 0; left: 0; z-index: 1;
	font-size: 13px; font-weight: 300;
	box-shadow: 0 0 5px #00000055 }
.amwsinfobox i, .amwsinfobox em { font-weight: 500; font-style: normal }
@media (min-width: 571px) {
	.amwsinfobox { position: absolute; width: 30em;
		bottom: auto; left: auto }
}

#dlfiles .btn { font-size: 12px }

#extlinkpopup { position: fixed; top: 0; left: 0; width: 100%;
	height: 100%; overflow: auto; text-align: center;
	background: #000000aa; z-index: 2010 }
#extlinkpopup::before { content: ''; display: inline-block; width: 1px;
	height: 90%; margin-right: -1px; vertical-align: middle }
#extlinkpopup .inner { background: white; color: black;
	vertical-align: middle; display: inline-block;
	box-shadow: 3px 3px 8px #00000033; padding: 2em;
	font-size: 14px; position: relative; text-align: left }
#extlinkpopup .close { font-size: 20px; position: absolute; top: 4px;
	right: 8px; cursor: pointer }

#header .service-menu.showLogin .dropdown-menu.login-shop-addr {
	min-width: 300px }
#header.c202012 .search-menu-col .service-menu.showLogin .dropdown-menu img {
	width: auto; height: auto; max-height: none }
#header .service-menu.showLogin .login-shop-addr #loginBox .lead {
	font-size: 16px; font-weight: bold; display: block; margin: .5em 0 }
#header .service-menu.showLogin .login-shop-addr #loginEmail::placeholder,
#header .service-menu.showLogin .login-shop-addr #loginPasword::placeholder {
	font-size: 12px; font-style: normal; font-weight: normal;
	color: #999 !important }
#header .service-menu.showLogin .login-shop-addr #loginEmail,
#header .service-menu.showLogin .login-shop-addr #loginPasword,
#header .service-menu.showLogin .login-shop-addr a.forgotPasswordOpener.btn {
	height: 3em; font-size: 14px; box-sizing: border-box;
	line-height: 2em; border-radius: 0 }
#header .service-menu.showLogin .login-shop-addr a.forgotPasswordOpener.btn {
	padding-left: 1.2em; padding-right: 1.2em; background: white }
#header .service-menu.showLogin .login-shop-addr .checkbox { font-size: 11px;
	margin-top: 5px }
#header .service-menu.showLogin .login-shop-addr .checkbox input { margin-top: 0px }
#header .service-menu.showLogin .login-shop-addr .btn {
	text-transform: uppercase; border-radius: .5em;
	font-size: 11px }
#header .service-menu.showLogin .login-shop-addr #registerLink {
	background: #ccc; margin-left: .8em }
#header .service-menu.showLogin .login-shop-addr .service-menu-box > div.small {
	margin-top: 1.2em }
#header .service-menu.showLogin .login-shop-addr .form-group { margin-bottom: 8px }

.dd-fullwidth .dd-image-box img { width: 100% }

.dd-shortcode-column.amws-fullwidth { overflow: hidden }

#amws-local-navigation { background: #eff2f5c0; color: black;
	padding: .6em 0; border-bottom: 1px solid #d6dce5 }
@supports (backdrop-filter: blur(20px)) {
	#amws-local-navigation { backdrop-filter: saturate(180%) blur(20px) }
}
#amws-local-navigation .title { font-size: 18px; font-weight: 500; float: left }
#amws-local-navigation .navigation { float: right; text-align: right;
	font-size: 14px; font-weight: 300 }
#amws-local-navigation .navigation a { display: inline-block; padding: .3em 1em;
	color: black; cursor: pointer }
@media (min-width: 992px) {
	.row.amws-local-navigation-row { position: sticky; top: 60px; z-index: 10 }
}

.dd-shortcode-imghero { position: relative; overflow: hidden }
.dd-shortcode-imghero div.bgimage { display: block; width: 100% }
.dd-shortcode-imghero img.bgimage { display: block; width: 100%;
	height: auto }
.dd-shortcode-imghero .dd-hero-inner { position: absolute;
	top: 0; left: 0 }

td.checkactive.checkbox.text-center > input[type='checkbox'] { position: static }

.productBox input[disabled], .productBox button[disabled] { opacity: 0.5 }

.btn.categorybutton { text-transform: uppercase; font-size: 11px; border-radius: 5px;
	padding: 12px; font-weight: 700 }

.amws404 { position: relative; color: #002c52; font-size: 18px }
.amws404 h1.page-header { font-weight: 700; font-size: 1.8em }
.amws404 p { font-weight: 500; font-size: 1em }
.amws404 > img { display: block; object-fit: none; object-position: 0 0;
	width: 100%; height: 100%; position: absolute; z-index: 0 }
.amws404 > .inner { position: relative; padding: 3em 2em;
	width: 100%; max-width: 31em;
	margin-bottom: -2em }
.amws404 .btn { margin-bottom: 4em; margin-top: .7em; font-size: .9em }
.amws404 .btn-default { background: #002c52; color: white; font-weight: 500;
	border-color: #002c52; border-radius: .6em; padding: .1em 1em }
@media (min-width: 992px) {
	.amws404 > img { position: relative; width: 100%; height: auto;
		margin-bottom: -2em; object-fit: cover }
	.amws404 > .inner { position: absolute; top: 0; left: 0;
		margin-bottom: 0 }
}
@media (min-width: 1400px) {
	.amws404 { font-size: 24px }
	/* .amws404 h1.page-header { font-size: 48px }
	.amws404 p { font-size: 24px } */
}