/* html { scroll-behavior: smooth } */

body, #wrapper { background-color: #f2f2f2 }
body.cl-content, body.cl-content #wrapper,
body.cl-details, .cl-details #wrapper { background-color: white }

#topbar { height: auto /* 45px */; min-height: 45px; padding-top: 6px; font-size: 14px;
	background: #262626; color: #bfbfbf; font-weight: 400;
	padding-left: 0; padding-right: 0 }
#topbar > .container { padding-top: 5px; padding-bottom: 5px }
#topbar > .container > div { padding-top: 0; padding-bottom: 0;
	height: auto; min-height: 20px }
#topbar div.topbar { font-size: 14px; margin-right: -15px }

.langselect label { font-weight: 400 }
.langselect label.shop { text-align: left }
.langselect label.lang { text-align: right }
.langselect input:checked + .dropdown { text-transform: none;
	text-align: left; top: 23px }
.langselect label.shop { width: 18em }
.langselect label.lang { width: 8em }
.langselect input:checked + .dropdown { background: #262626; top: 30px }
#footer .langselect .dropdown { border-color: #444 }
.langselect input:checked + .dropdown.shop { right: 8em; width: 18.5em }
.langselect input:checked + .dropdown.lang { right: 0; width: 9em }
.langselect img { width: 1.2em; height: 1.2em; vertical-align: -.2em }
.langselect label span { text-transform: none }

/* body.fixed-header #header, #header { position: relative } */

#header { padding-top: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
	border-bottom: none }
#header .logo-col img { max-width: 100px; max-height: 40px; height: auto }
#header .logo-col,
#header .search-col,
#header .menus-col { padding-top: 10px; padding-bottom: 10px }
#header .logo-col { min-width: 170px }
#header .menus-col { float: right; max-width: calc(100% - 170px) }
body.fixed-header #header, #header { height: auto }
#header .menus-col .menu-dropdowns > .btn-group > .btn,
#header .menus-col .btn { font-weight: 400 }

#header .menus-col { margin-top: 5px }
#header .menus-col img { vertical-align: bottom }
#header .service-menu .dropdown-menu { min-width: 120px }
#header .service-menu .flyoutBox li { white-space: nowrap }
#header .service-menu-box .btn-danger { background: #002c52;
	border-color: #002c52 }
#header .service-menu-box,
#header .service-menu-box .lead { font-weight: 400 }

#header .menus-col .menu-dropdowns > .btn-group {
	margin-left: 0 }
#header .menus-col .menu-dropdowns > .btn-group.minibasket-menu {
	margin-left: 20px }

#header .search-col form .input-group { box-shadow: none }
#header .search-col #searchParam { border-top-left-radius: .2em;
	border-bottom-left-radius: .2em;
	border-top: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf }
#header .search-col #searchParam,
#header .search-col #searchParam:focus {
	background: #f2f2f2; color: black !important;
	border-color: #bfbfbf !important }
#header .search-col #searchParam::placeholder { color: #444 !important }
#header .search-col button { padding: 5px 7px 6px 7px;
	background: #002c52 linear-gradient(#005192, #002c52);
	color: white;
	border: 1px solid #002c52;
	border-top-right-radius: .2em;
	border-bottom-right-radius: .2em }

/* #header .prodcats-col { margin-top: 5px; font-weight: 400 } */
#header .prodcats-and-links { box-sizing: border-box; height: 0;
	overflow: hidden; border: 0; min-height: 0 }
#header .prodcats-and-links > div {
	background: #002c52
	linear-gradient(to bottom, #002c52 0%, #005192 100%);
	color: white; font-weight: 400; font-size: 14px }
#header .prodcats-and-links > div::after { content: '';
	display: table; clear: both }
#header .prodcats-and-links a { color: white }
#header .prodcats { width: 100%;
	/* background: #002c52 linear-gradient(to bottom, #002c52 0%, #004a87 100%); */
	color: white; font-weight: 500; padding: 0;
	vertical-align: middle; margin-bottom: -1px }
#header .prodcats label { font-weight: 400; margin: 0; padding: 10px;
	width: 100% }
#header .prodcats label img { vertical-align: -.3em; width: 1.5em;
	height: 1.5em; margin-left: 5px; margin-right: 10px }
#header .prodcatslinks { padding: 10px; text-align: left }
#header .prodcatslinks a { margin-right: 10px; margin-left: 10px;
	text-decoration: none }
#header .prodcatslinks a img { margin-right: 5px }

#footer { background: #262626; color: #bfbfbf; font-weight: 400;
	line-height: 1.3 }
#footer a { color: #bfbfbf }
#footer h4,
#footer .footer-box-title { font-size: 12px; margin-bottom: 1.1em }

.flex { margin-left: -15px; margin-right: -15px; display: flex;
	flex-direction: row; flex-wrap: wrap }
.flex > .col { flex: 0 0 100%; padding-left: 15px; padding-right: 15px }
#footer .flex > .col { padding-top: 20px }

#maincats { position: relative; z-index: 4 }
#maincats a { text-overflow: ellipsis; overflow: hidden }
#maincats > ul.main { position: relative }
#maincats.alwaysopen { transition: opacity 400ms ease;
	opacity: 1; pointer-events: all }
/* #maincats.alwaysopen.fadeout { opacity: 0; pointer-events: none } */
#maincats.alwaysopen > ul.main { display: block }
#maincats > ul > li > ul { display: none }
#maincats > ul { left: 0; width: 320px; max-width: 100%;
	height: auto; max-height: none; padding: 0;
	/* box-shadow: 2px 2px 8px rgba(0, 0, 0, .3) */ }
#maincats > ul > li { display: block; width: 100%; margin: 0;
	padding: 5px 10px; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis }
#maincats > ul.sub1 { display: none; top: 0 }
#maincats > ul.sub2 { display: none; top: 0 }
#maincats a { color: black; text-decoration: none; display: block;
	padding: 10px 20px 10px 10px; position: relative; line-height: 20px }
#maincats > ul.main > li > a { padding-left: 40px }
#maincats > ul.main > li > a > img { position: absolute; left: 0; top: 6px;
	width: 30px; height: 30px }
#maincats li { position: relative; border-bottom: 1px solid #eee }
#maincats > ul > li > a { font-weight: 400 }
#maincats li.act > a { color: #004a87 }
#maincats li > i.fa { display: block; position: absolute;
	top: 50%; right: 10px; transform: translate3d(0, -50%, 0) }
#maincats li.act,
#maincats li:hover { background: #f2f2f2 }

.logo-col label[for="maincatstoggle"] { margin-left: 20px; cursor: pointer }
#maincats-holder { position: absolute; top: to; left: 0; width: 100%; height: 0 }
#maincats-holder > .container { padding: 10px }
#maincats-holder #maincats ul { box-shadow: 2px 2px 8px rgba(0, 0, 0, .3) }

body.c202307 #breadcrumbs { margin-bottom: 13px }
body.c202307 #breadcrumbs #breadcrumb { margin-bottom: 0 }

.breadcrumb .text-muted { color: #bfbfbf }
.breadcrumb > li.active a { color: #0070c0 }

.page-header { border-bottom: 0 }
h1.page-header { font-size: 30px; font-weight: 500 }

.textinpic.catpic .textinpic-over { width: 90% }
.category-title { font-size: 22px; font-weight: 400;
	margin: .5em .2em 1em .2em }

h1.category-titles { font-size: 20px }
h1.category-titles a.inactive { color: #888 }
h1.category-titles a.inactive::after { content: ' | ' }
h1.category-titles a:hover,
h1.category-titles a:focus { text-decoration: none; color: inherit }

.locator-top { display: flex; justify-content: space-between; gap: 10px;
	margin-top: 2em; margin-bottom: 1em; flex-wrap: wrap }
/* .locator-top > * { flex: 1 1 auto } */
.locator-top { font-size: 12px }
.locator-top .btn-group .btn { border: none; padding: 0;
	background: inherit }
.locator-top .btn-group .btn:hover, .locator-top .btn:focus {
	background: inherit }
.locator-top .btn-group.open .dropdown-toggle { background: inherit }
.locator-top .btn-group { width: auto }
.locator-top .toggle-filters { color: white; background: #002c52;
	padding: .5em 1em; border-radius: .3em; cursor: pointer }
.locator-top .toggle-filters:hover { text-decoration: none }
.locator-top .sellisttype { flex: 1 1 40%; text-align: right }
.sellisttype img { max-height: 20px; margin-left: 5px;
	vertical-align: middle }
#facettes { height: 0; overflow: hidden; font-size: 12px;
	position: relative }
#facettes .col-xs-12 { margin-bottom: 15px }
#facettes.anim { transition: height 200ms }
#facettes.open { height: auto }
#facettes .title { font-weight: 700 }
#facettes .option.odd { background: #eee }
#facettes .values { margin-bottom: 1em }
#facettes .values input { margin-right: .5em }
#facettes .values { font-size: 11px }
#aggregationform { position: relative }
#aggregationform label.disabled { opacity: .5 }
.umremovefiltercontainer { display: block }
.umremovefacettedetail-info { border-right: 0;
	border-top: 1px solid #002c52;
	border-left: 1px solid #002c52;
	border-bottom: 1px solid #002c52 }
.umremovefacettedetail-btn { background: white; color: black;
	border-left: 0;
	border-top: 1px solid #002c52;
	border-right: 1px solid #002c52;
	border-bottom: 1px solid #002c52 }
.umremovefacettedetail-btn:hover { background: white;
	border-left: 0;
	border-top: 1px solid #002c52;
	border-right: 1px solid #002c52;
	border-bottom: 1px solid #002c52 }
.umremoveallfacettes .umremovefacettedetail-info,
.umremoveallfacettes .umremovefacettedetail-btn {
	background: #002c52; color: white }

.umremovefiltercontainer { position: relative }
#facettes .filterblocker,
#aggregationform .filterblocker,
.umremovefiltercontainer .filterblocker { position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; pointer-events: none;
	/* transition: opacity 200ms ease; */
	opacity: 0; background: white }
#facettes .filterblocker.blocking,
#aggregationform .filterblocker.blocking,
.umremovefiltercontainer .filterblocker.blocking { pointer-events: all;
	opacity: .4; animation: blocking-in 500ms 200ms both }
@keyframes blocking-in {
	from { opacity: 0 }
	to { opacity: .4 }
}

.gridView .productBox .picture,
.boxwrapper .list-container .gridView
.productBox .picture { border-bottom: 0; width: 95%; height: 150px;
	padding-top: 10px; margin: 0 auto; max-width: 200px }
/* .gridView .productBox .picture img,
.boxwrapper .list-container .gridView
.productBox .picture img { max-width: 200px } */
.gridView > .productData > form { background: white; margin-bottom: 15px;
	position: relative; z-index: 0 }
.gridView > .productData .listDetails { padding: 0 15px 15px 15px }
.gridView > .productData .product-details { font-size: 11px }
.gridView .productBox .title,
.boxwrapper .list-container .gridView .productBox .title { height: auto }
.gridView .productData div.title,
.boxwrapper .list-container
.gridView > .productData div.title { padding: 0;
	line-height: 1; height: 3.7em; position: relative;
	display: block; overflow: hidden; margin-bottom: .5em }
.gridView > .productData div.title::after { content: '';
	display: block; position: absolute; bottom: 0; left: 0;
	width: 100%; height: .8em;
	background: linear-gradient(#ffffff00, #ffffffff) }
.gridView .product-details { overflow: hidden; line-height: 1.3 }
.gridView .product-details.no-price { height: 7.5em }
.gridView .product-details.moreinfo { height: 15em }
.gridView .product-details .desc { overflow: hidden; height: 5em;
	position: relative; margin-bottom: 1em }
.gridView .product-details .desc::after { content: ''; display: block;
	position: absolute; bottom: 0; left: 0; width: 100%; height: 1em;
	background: linear-gradient(#ffffff00, #ffffffff) }
.gridView .product-details .price { height: 1em; font-size: 14px;
	font-weight: 500; margin-bottom: 1em; line-height: 1 }
.gridView .product-details .itemno { margin-bottom: 1em; line-height: 1;
	height: 1em }
.gridView .itemno.no-price { margin-top: 3.8em }
.gridView .product-details .avail { margin-bottom: 1em; line-height: 1;
	height: 1em }

.lineView form { background: white; position: relative;
	margin-bottom: 15px }
.lineView form::after { content: ''; display: table; clear: both }
.boxwrapper .list-container .lineView .productBox form {
	padding-bottom: 10px; padding-top: 10px }
.lineView .no-price .title { font-size: 1.2em; min-height: 3.5em;
	padding-top: 1em; padding-bottom: 1em }
.boxwrapper .lineView .productBox .title,
.boxwrapper .lineView .productBox .title a { color: inherit }
.lineView .no-price .description { min-height: 4.5em; padding-bottom: 1em }
.lineView .moreinfo .title { padding-top: 1.3em; font-size: 1.2em;
	min-height: 5em; padding-bottom: 1em; line-height: 1 }
.boxwrapper .lineView .productBox .price { text-align: left;
	min-height: 5em; padding-top: 1.3em; color: black;
	line-height: 1; height: auto }
.boxwrapper .lineView .productBox .artnum { margin-bottom: 0 }
.lineView .artnum.no-price { margin-top: 5.8em }

.productData .tobasket input { vertical-align: middle;
	background: #f2f2f2; border: 0; font-size: 1em;
	color: black; line-height: 1.2; padding: .35em;
	text-align: center }
.c202102buttons .boxwrapper .lineView .productBox .tobasket-button,
.productData .tobasket button { width: auto; height: auto;
	padding: .4em .8em; line-height: 1;
	background: linear-gradient(15deg, #886700, #e2ac00);
	border: 0; font-size: inherit; border-radius: 4px;
	vertical-align: middle }
.c202102buttons .boxwrapper .lineView .productBox .tobasket-button:hover {
	background: linear-gradient(15deg, #886700, #e2ac00) }
.productData .tobasket button img { height: 12px; width: auto }

.productData .img-badge { position: absolute; top: 7px; left: 0;
	z-index: 1 }
.gridView .productData .img-badge { top: 10px }

.productData .title:hover { color: inherit; text-decoration: none;
	outline: none }

.qtyfldgrp { background: #f2f2f2; position: relative;
	padding-left: 1.5em; padding-right: 1.5em; display: inline-block;
	vertical-align: middle; text-align: center }
.qtyfldgrp .b { position: absolute; top: .15em;
	background: #0070c0; color: white; font-size: 1em;
	text-align: center; display: block; width: 1.5em;
	height: 1.6em; user-select: none; line-height: 1.6em;
	cursor: pointer }
.qtyfldgrp .b:hover { text-decoration: none }
.qtyfldgrp .b.disabled { background: #bfbfbf; cursor: default }
.qtyfldgrp, .qtyfldgrp .b { border-radius: .2em }
.qtyfldgrp .b.left { left: .15em }
.qtyfldgrp .b.right { right: .15em }
input.qtyfld:focus { color: black !important }

.c202102buttons .boxwrapper .lineView .productBox .tobasket-button,
.lineView .productData .tobasket button,
.lineView .qtyfldgrp { width: 120px; max-width: 90% }
.lineView .qtyfldgrp { display: block }
.lineView .productData .tobasket { padding-top: 1.3em }
.lineView .productData .tobasket button { margin-top: .3em }

.locator.locator-bottom { text-align: center }

/* product details */
body.cl-details #zoom1 img { margin: 0 auto }
#detailsMain .vendormatrix-buttons { padding-top: 1.5em; padding-bottom: 0 }
p.proddetail-moreinfo { margin: 0 0 1em 0 }
a.proddetail-moreinfo { color: #002c52; text-transform: uppercase;
	font-weight: bold }
#detailsMain
p.proddetail-moreinfo + div.information
.vendormatrix-buttons { padding-top: 10px; padding-bottom: 0 }
#detailsMain .prodinfo-open { margin: .5em 0 0 0; padding: 0 }
#detailsMain .prodinfo-open a { color: #002c52 }
#detailsMain .prodinfo-openable { position: relative }
#detailsMain .prodinfo-openable.start { max-height: 210px;
	overflow: hidden }
#detailsMain .prodinfo-openable.anim { transition: height 300ms ease-out }
#detailsMain .prodinfo-openable.start::after,
#detailsMain .prodinfo-openable.unexpanded::after {
	content: ''; display: block; width: 100%; height: 20px;
	position: absolute; bottom: 0; left: 0;
	background: transparent
		linear-gradient(to bottom, #ffffff00 0%, #ffffffff 100%) }
#detailsMain .vendormatrix-buttons .btn { min-width: 120px;
	margin-right: 10px }
#detailsMain .vendormatrix-buttons .vendormatrix-login,
.c202102buttons #detailsMain .tobasket .btn-primary.vendormatrix-login:hover,
#detailsMain .vendormatrix-buttons .vendormatrix-login:hover {
	background: linear-gradient(15deg, #886700, #e2ac00) }
#detailsMain .tobasket .input-group { width: 100% }
#detailsMain .tobasket .btn-towishlist { }
#detailsRelated .downloads a { text-decoration: underline }

#detailsMain p.note { font-weight: bold }

#detailsMain .details-col-left .picture { position: relative }
#detailsMain .prod-badge { position: absolute; z-index: 1 }
#detailsMain .prod-badge img { width: auto; height: 30px }

#rich-marketing-outer { background: #f2f2f2; padding: .7em 0 }
#rich-marketing { /* background: #eff1f6; */ position: relative; z-index: 0 }
#rich-marketing > .sarea { padding: 10px 30px; display: flex;
	flex-direction: row; overflow: hidden;
	scroll-behavior: smooth; width: fit-content; margin: 0 auto;
	max-width: 100% }
#rich-marketing > .sarea > * { flex: 0 0 275px; background: white;
	padding: 10px; display: flex; flex-direction: column;
	margin: 10px; box-shadow: 0 0 5px #00000033; text-align: left;
	justify-content: start; align-content: start }
#rich-marketing > .sarea > * > * { flex: 1 1 auto }
#rich-marketing > .buttons { position: absolute; width: 100%;
	height: 100%; top: 0; left: 0; pointer-events: none;
	z-index: 2; display: none }
#rich-marketing.js > .buttons { display: block }
#rich-marketing > .buttons > * { position: absolute; width: 1.2em;
	height: 1.2em; line-height: 1.05em; text-align: center;
	border-radius: 1em; background: #002c52; color: white;
	box-shadow: 0 0 25px 10px #ffffffff; top: calc(50% - 1em);
	pointer-events: all; user-select: none;
	cursor: pointer; font-size: 2em }
#rich-marketing > .buttons > .bleft { left: calc(30px - 1em) }
#rich-marketing > .buttons > .bright { right: calc(30px - 1em) }
hr.rich-marketing { margin: 0; border-top-color: #aaa }
h3.rich-marketing { text-align: center; margin: .4em 0 .1em 0;
	font-size: 20px }
.rm-datasheet a, .rm-handout a, .rm-link a, .rm-link a:focus,
.rm-prodmatrix a, .rm-prodmatrix a:focus, 
.rm-datasheet a:focus, rm-handout a:focus { font-size: 14px;
	font-weight: 600; color: black; display: block;
	text-decoration: none }
.rm-youtube .picture { position: relative;
	/* width: 300px; height: 168px;  */
	/* width: 150px; height: 84px; */
	width: 180px; height: 107px;
	margin-bottom: 5px /* 20px */ }
.rm-youtube .picture img { width: 100%; height: 100%; display: block;
	object-fit: cover; border-radius: 5px }
.rm-youtube .picture .duration { position: absolute; bottom: 5px;
	right: 5px; background: black; color: white; font-size: 9px;
	font-weight: 400; padding: 3px 5px; border-radius: 3px }
.rm-youtube .title { font-weight: 600; font-size: 14px; /* line-height: 1; */
	/* height: 1em; */ /* overflow: hidden; text-overflow: ellipsis; */
	/* margin-bottom: 5px; */
	max-width: 100% /* 180px */ /* 150px */ /* 300px */;
	/* white-space: nowrap */ }
.rm-youtube .info { font-size: 11px; font-weight: 400; display: none }
.rm-youtube .info .pub::before { content: '•'; display: inline-block;
	padding: 0 .5em }
.rm-datasheet img { max-height: 117px; width: auto }
.rm-link img { height: 117px; width: 100%; object-fit: contain }
.rm-prodmatrix img { max-height: 107px /* 215px */; width: auto; margin: 5px }

#detailsRelated h3 > span { font-size: 14px; text-transform: uppercase;
	font-weight: bold }
#relprods h3.relprods::before, #detailsRelated h3::before { display: none }
#detailsRelated h3 { position: relative; margin-top: 30px; margin-bottom: 20px }
#detailsRelated h3 + * { overflow: hidden }
#detailsRelated h3 + .closed { height: 0 }
#detailsRelated h3 + .anim { transition: height 200ms }
#detailsRelated h3 .openclose { position: absolute; top: 0; right: 0;
	width: 1.3em; height: 1.3em; line-height: 1.3em; text-align: center;
	font-weight: normal; font-size: 14px }
#detailsRelated h3 .openclose::before { content: '+'; display: inline }
#detailsRelated h3 .openclose.open::before { content: '-' }
#detailsRelated .details-block { border-bottom: 1px solid #eee;
	padding-bottom: 20px }
.cl-details .more-pics { margin-top: -1px; border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0; position: relative }
.cl-details .more-pics.js { overflow: hidden }
.cl-details .more-pics img { width: 340px; height: 227px; object-fit: contain;
	border-right: 1px solid #e0e0e0 }
.cl-details .more-pics.js .more-pics-slider { display: flex;
	transition: left 200ms }
.cl-details .more-pics.js .more-pics-slider a { flex: 0 }
.cl-details .more-pics.js .slide-left,
.cl-details .more-pics.js .slide-right { display: block; position: absolute; top: 0;
	height: 100%; width: 30px; background: #f2f2f2; color: black;
	text-align: center; cursor: pointer }
.cl-details .more-pics.js .slide-left { left: 0 }
.cl-details .more-pics.js .slide-right { right: 0 }
.cl-details .more-pics.js .slide-left::before { content: '<' }
.cl-details .more-pics.js .slide-right::before { content: '>' }
.cl-details .more-pics.js .slide-left::before,
.cl-details .more-pics.js .slide-right::before { display: block;
	position: absolute; top: 50%; font-size: 14px; left: calc(50% - 4px);
	font-weight: bold }
.cl-details .more-pics.js .slide-left.inact::before,
.cl-details .more-pics.js .slide-right.inact::before { opacity: .3 }

#account_menu .list-group-item:first-child { border-radius: 0 }
#account_menu .list-group-item:last-child { border-radius: 0 }
#account_menu .list-group-item { background: #f2f2f2; color: #5a5a5a;
	font-weight: 500 }
#account_menu .list-group-item.active { background: #f2f2f2;
	color: #002c52; border-color: #ddd }
#account_menu .list-group-item a { color: inherit }

.account-form label.control-label { text-align: left;
	color: #444; font-weight: 500 }
.account-form button[type='submit'] { text-transform: uppercase;
	font-size: 12px; font-weight: 500; padding-left: 2em;
	padding-right: 2em }
.account-form .form-group { margin-bottom: 0 }
.account-form .form-group p.note { font-weight: 500; margin: .5em 0 1.5em 0;
	color: #444 }

.panel-heading { font-weight: 500; color: #444 }
.panel-body { font-weight: 400; color: #444 }
.panel-body.nopad { padding: 0 }
/* .flex-row { display: flex; flex-wrap: wrap } */
.flex-col { flex: 1 1 auto }
.flex-col.pad { padding: 10px 20px }
.flex-col.sep { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;
	margin-right: -1px; margin-bottom: -1px }
table.data-table th, table.data-table td { font-size: 11px }
table.data-table th { text-align: left; vertical-align: top; padding-right: 10px }
table.data-table td { text-align: left; vertical-align: bottom }

.popup { z-index: 11 }

.dd-shortcode-mmhhighlights .title { font-weight: 600 }
.dd-shortcode-mmhhighlights.js .products.extbuttons {
	margin-left: -15px; margin-right: -15px }
.dd-shortcode-mmhhighlights .header { margin-top: 2em; margin-bottom: 1.3em }
.dd-shortcode-mmhhighlights .header::after{ content: ''; display: table;
	clear: both }
.dd-shortcode-mmhhighlights .header > * { display: inline-block;
	vertical-align: middle; margin-right: 30px }
.dd-shortcode-mmhhighlights .header > h3 { margin-top: 0; margin-bottom: 0 }
.dd-shortcode-mmhhighlights .header > .overviewlink { padding-left: 30px;
	border-left: 1px solid #bfbfbf; font-weight: normal }
.dd-shortcode-mmhhighlights .header > .overviewlink a,
.dd-shortcode-mmhhighlights .header > .overviewlink a:hover {
	color: #0070c0 }
.dd-shortcode-mmhhighlights .header > .buttons { float: right;
	margin-right: 0; display: none }
.dd-shortcode-mmhhighlights.buttons .header > .buttons { display: block }
.dd-shortcode-mmhhighlights .header > .buttons > .button {
	display: inline-block; border: 1px solid #bfbfbf;
	background: white; color: black; border-radius: .4em;
	margin-left: .5ex; width: 1.7em; height: 1.7em;
	text-align: center; line-height: 1.7em;
	cursor: pointer; user-select: none; font-weight: 500 }
.dd-shortcode-mmhhighlights .header > .buttons > .button > i.fa {
	font-size: 11px }
/* .dd-shortcode-mmhhighlights .product .badge-new { display: none } */

.sidebar_um_search { margin-top: 20px }
.sidebar_um_search > form > .row { background: white;
	padding: 0 15px 15px 15px }
.sidebar_um_search section.sidebar_um_search { margin-top: 0 }
.sidebar_um_search ul.um_search_facette > li:nth-child(2n) {
	background: #f2f2f2 }

.sidebar-latest { background: white; padding: 15px; text-align: center;
	margin-left: -15px; margin-right: -15px;
	margin-top: 20px }
.sidebar-latest .title { font-weight: 600; margin: .3em 0 .5em 0;
	line-height: 1.2 }
.sidebar-latest .btn { font-size: 10px; text-transform: uppercase;
	color: white; padding: 9px 12px;
	background: linear-gradient(15deg, #886700, #e2ac00);
	border: 0; border-radius: 5px }
.sidebar-latest .picture { margin: 10px 0 0 0 }
.sidebar-latest img { max-width: 100% }

.productlist .categorysubbar > span { background: #f2f2f2 }

#wrapper #searchList .interlude { margin-bottom: 15px }
#wrapper #searchList .interlude .dd-hero-box .dd-hero-inner
.dd-hero-holder { height: 170px; padding-top: 20px;
	padding-bottom: 20px }

@media (min-width: 640px) {
	/* #header .prodcats-col { display: flex; flex-direction: row-reverse;
		justify-content: left } */
	#header .logo-col img { max-width: 192px; max-height: 50px; height: auto }
	#header .menus-col .menu-dropdowns > .btn-group {
		margin-left: 20px }
	#topbar { height: 45px }
	#topbar div.topbar { font-size: 12px }
	.locator-top .sellisttype { flex: 0 0 auto }

	.flex > .col { flex: 0 0 50% }
}

@media (min-width: 992px) {
	.langselect { border-left: 1px solid #e0e0e0 }
	#footer .langselect { border-left: 0 }
	#header .prodcats-and-links > div {
		background: #002c52
		linear-gradient(to right, #002c52 0%, #005192 100%) }
	#pagenav-top { top: 0 }
	#pagenav-top.details-tab { position: fixed; z-index: 3; opacity: 0;
		transition: opacity 200ms ease; top: 70px;
		pointer-events: none; left: 0; width: 100%;
		font-weight: 500 }
	#pagenav-top.details-tab.fixedpos { opacity: 1; pointer-events: auto;
		padding-left: 0 }
	#pagenav-top.details-tab a { display: inline-block; margin-right: 5em }
	#pagenav-top.details-tab a::before { content: '›'; display: inline-block;
		margin-right: 1ch }
	.row.amws-local-navigation-row { top: 0 }
	#header .logo-col { width: 200px /* 170px */ }
	#header .menus-col { width: 310px }
	#header .search-col { width: 440px /* 470px */ }
	#header .menus-col,
	#header .search-col { margin-top: 5px }
	#header .prodcatslinks { text-align: right }
	/* #maincats { transform: translateY(14px) } */
	#maincats > ul.sub1 { display: block; left: 315px;
		width: 300px }
	#maincats > ul.sub2 { display: block; left: 610px;
		width: 300px }
	.twocols { column-count: 2 }
	#startslider .dd-hero-inner { padding: 100px 50px }
	.boxwrapper .lineView .productBox .pricebasket { border-left: 0 }

	.flex > .col { flex: 0 0 33% }
}

@media (min-width: 1200px) {
	#header .logo-col { width: 230px }
	#header .menus-col { width: 310px }
	#header .search-col { width: 650px }
	.panel-body .flex-row { flex-wrap: nowrap }
	.container { width: 100%; max-width: 1383px }
	.dd-shortcode-mmhhighlights .products > .col-md-3 { width: 19.99% }

	.flex > .col { flex: 1 1 10% }
}

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

html[lang='ru'] #header .menus-col,
html[lang='ru'] #header .menus-col .btn,
html[lang='pl'] #header .menus-col,
html[lang='pl'] #header .menus-col .btn { font-size: 11px }
html[lang='ru'] #header .menus-col .btn span,
html[lang='pl'] #header .menus-col .btn span { white-space: normal;
	display: inline-block; width: 7em }
html[lang='hu'] #header .menus-col,
html[lang='hu'] #header .menus-col .btn { font-size: 12px }
html[lang='fr'] #header .menus-col,
html[lang='fr'] #header .menus-col .btn,
html[lang='nl'] #header .menus-col,
html[lang='nl'] #header .menus-col .btn { font-size: 12px }

body.cl-details #zoom1 { display: flex; justify-content: center;
	aspect-ratio: 1.5 }
body.cl-details #zoom1 img { object-fit: contain }
body.cl-details #morePicsContainer ul { display: flex; gap: 5px 0;
	flex-wrap: wrap; justify-content: flex-start;
	align-items: center }
body.cl-details #morePicsContainer li { flex: 0 0 16.667%;
	display: flex; justify-content: center }
body.cl-details #morePicsContainer img { width: 100%;
	display: block; aspect-ratio: 1.5;
	max-width: 100%; max-height: 100%;
	object-fit: contain }

.ytoverlay { display: flex; width: 100%; height: 100%; top: 0; left: 0;
	justify-content: center; align-items: center;
	background-color: #000c; padding: 10px;
	position: fixed; z-index: 1000 }
.ytoverlay > .inner { width: 80vw; height: 80vh; padding: 20px;
	background: white; color: black; border-radius: 10px }
.ytoverlay > .close { position: absolute; top: 10px; right: 10px;
	width: 30px; height: 30px; border-radius: 20px;
	background: white; color: black; font-size: 28px;
	cursor: pointer; text-align: center; font-weight: 900;
	opacity: .9 }

/*
 * catslide
 */

.catslider {
	position: relative; overflow: hidden;
	width: 100%; aspect-ratio: 1500/400;
	/* height: 300px; */
	margin-bottom: 20px;

	.arrleft, .arrright { position: absolute; top: 50%;
		transform: translate3d(0, -50%, 0);
		cursor: pointer; display: none }
	.arrleft { left: 30px }
	.arrleft::before { content: url(../../img/slide-left-white.png) }
	.arrright { right: 30px }
	.arrright::before { content: url(../../img/slide-right-white.png) }
	.dots { position: absolute; bottom: 10px; left: 50%;
		text-align: center; font-size: 12px;
		transform: translateX(-50%) }
	.dots a { display: inline-block; margin: 0; padding: .5em;
		vertical-align: middle; cursor: pointer }
	.dots a::before { content: ''; display: inline-block;
		background: white; width: .5em; height: .5em;
		border-radius: 1000px; opacity: .7 }
	.dots a.sel::before { width: .7em; height: .7em; opacity: 1 }
	.dd-shortcode-catslide { position: absolute; top: 0; left: 0;
		width: 100%; height: 100% }
	.dd-shortcode-catslide.out { opacity: 0; pointer-events: none }
	.dd-shortcode-catslide.in-left { animation: catslider-in-left 400ms }
	.dd-shortcode-catslide.in-right { animation: catslider-in-right 400ms }
	.dd-shortcode-catslide.out-left { animation: catslider-out-left 400ms }
	.dd-shortcode-catslide.out-right { animation: catslider-out-right 400ms }
}
@keyframes catslider-in-left {
	from { transform: translate3d(100%, 0, 0) }
	to { transform: translate3d(0, 0, 0) }
}
@keyframes catslider-in-right {
	from { transform: translate3d(-100%, 0, 0) }
	to { transform: translate3d(0, 0, 0) }
}
@keyframes catslider-out-left {
	from { transform: translate3d(0, 0, 0) }
	to { transform: translate3d(-100%, 0, 0) }
}
@keyframes catslider-out-right {
	from { transform: translate3d(0, 0, 0) }
	to { transform: translate3d(100%, 0, 0) }
}
@media (min-width: 768px) {
	.catslider .arrleft,
	.catslider .arrright { display: block }
}
@media (min-width: 1200px) {
	.catslider { height: auto; aspect-ratio: 1500/400 }
}

.dd-shortcode-catslide {
	width: 100%; margin-block: 10px;

	a { color: inherit; text-decoration: inherit }

	.bgimg { width: 100%; height: 100% }
	.bgimg img { width: 100%; height: 100%;
		object-fit: cover; display: block;
		object-position: 90% 50% }
	.text { position: absolute; top: 50%; left: 20px;
		max-width: 60%; color: white;
		font-size: 22px; line-height: 1.2;
		transform: translate3d(0, -50%, 0);
		text-shadow: 2px 2px 5px #0006 }
	.headline { font-weight: bold }
	.btn { text-shadow: 0 0 0; border: 1px solid #ccc;
		background: white; color: black;
		padding: .2em .5em; font-size: 11px }
}
@media (max-width: 767px) {
	.dd-shortcode-catslide {
		.text { font-size: 3vw }
		.text .body p span { font-size: 2.6vw !important }
	}
}
@media (min-width: 768px) {
	.dd-shortcode-catslide {
		.text { left: 100px; font-size: 22px }
	}
}
@media (min-width: 1200px) {
	.dd-shortcode-catslide {
		.text { font-size: 26px }
		.bgimg,
		.bgimg img { height: auto; aspect-ratio: 1500/400 }
	}
}
.catslider .dd-shortcode-catslide { margin: 0 }

.dd-shortcode-cattile {
	width: 100%; margin-bottom: 20px;
	position: relative;

	.bgimg { width: 100% }
	.bgimg img { width: 100%; height: auto }
	/* .bgimg::after { content: ''; display: block;
		position: absolute; width: 100%; height: 100%;
		top: 0; left: 0;
		background: transparent
			linear-gradient(#002c5288, #002c5200)
			no-repeat top left } */
	.text { position: absolute; top: 10px; left: 10px;
		max-width: 60%; color: white;
		font-size: 11px; line-height: 1.2;
		text-shadow: 1px 1px 3px #0002 }
	.headline { font-weight: bold; font-size: 15px }
	.cta { position: absolute; bottom: 10px; right: 10px;
		max-width: 70%; text-align: right }
	.btn { text-shadow: 0 0 0; border: 1px solid #ccc;
		background: white;
		padding: .2em .5em; font-size: 11px }
}

/*
 * c202507
 */

@media (min-width: 992px) {
	body.fixed-header #topbar,
	#topbar { position: sticky; top: 0; z-index: 12; height: 45px }
	body.fixed-header #header,
	#header { top: 45px; height: 70px }
}

.c202507 #maincats { margin-bottom: 20px }
.c202507 #maincats > ul.main > li.main > a { padding-left: 10px;
	font-weight: 500 }
.c202507 #maincats li.main.active { background: #f2f2f2 }
.c202507 #maincats li.main.active > a { color: #004a87 }
.c202507 #maincats li.active a { font-weight: bold }
.c202507 #maincats li.indent1 { padding-left: 25px }
.c202507 #maincats li.indent2 { padding-left: 35px }
.c202507 #maincats > ul { width: 100% }

@media (min-width: 992px) {
	.c202507.cl-search #content > div > .col-md-4 {
		position: absolute; top: 0; height: 100% }
	.c202507.cl-search #content > div > .col-md-8 {
		margin-left: 33%; min-height: calc(100vh - 127px) }
	.c202507.cl-search #maincats { position: sticky; top: 128px;
		max-height: calc(100vh - 165px);
		overflow: auto }
}
@media (min-width: 1200px) {
	.c202507.cl-search #content > div > .col-lg-9 {
		margin-left: 25% }
}

.c202507 .breadcrumb { font-size: 14px }
.c202507 .breadcrumb .text-muted { color: #666 }
.c202507 .breadcrumb > li a { color: #666 }
.c202507 .breadcrumb > li + li::before { color: #666 }
.c202507 .breadcrumb > li.active a { color: #0070c0; font-weight: normal }
.c202507.cl-search .breadcrumb { margin-top: 0 }
/*
.breadcrumbs202507 { font-weight: bold; font-size: .9em; margin-bottom: 15px }
.breadcrumbs202507 a { display: inline-block; margin-right: 1ch;
	color: #ccc }
.breadcrumbs202507 a::after { content: '|'; display: inline-block;
	color: #ccc; padding-left: 1.5ch }
.breadcrumbs202507 a:last-child::after { display: none }
.breadcrumbs202507 a.active { color: #002c52 }
*/

.c202507 .gridView .productBox .picture,
.c202507 .boxwrapper .list-container .gridView
.productBox .picture { width: 100%; padding-top: 0;
	margin-left: 0; margin-right: 0; max-width: 100% }
.c202507 .boxwrapper .list-container .gridView
.productBox .picture a { vertical-align: top }

@media (min-width: 1200px) {
	.c202507 .boxwrapper .list-container
	.lineView .productBox form { padding-top: 0; padding-bottom: 0 }
	.c202507 .boxwrapper .list-container
	.lineView .productBox form .picture { margin-left: -15px }
	.c202507 .boxwrapper .list-container
	.lineView .productBox .col-lg-9 { padding-top: 10px; padding-bottom: 10px }
}

@media (min-width: 1300px) {
	.c202507 #header .logo-col { width: 33% /* 346px */ }
	.c202507 #header .search-col { width: 500px }
}

.c202507 .filterbox { background: #e2e6e7; padding: 0 }
.c202507 .filterbox .expand-filters,
.c202507 .filterbox .collapse-filters { display: block;
	background-color: #d6dbde; padding: .3em .8em;
	text-align: center; color: #002c52; font-weight: bold;
	font-size: .9em; cursor: pointer;
	transition: height 400ms; overflow: hidden }
.c202507 .filterbox .expand-filters.hidden,
.c202507 .filterbox .collapse-filters.hidden { display: none }
.c202507 .filterbox .filters { transition: height 600ms;
	overflow: auto; max-height: max(300px, calc(70vh - 300px));
	scrollbar-gutter: stable }
.c202507 .filterbox .filters.shrunk { max-height: 4.3em; overflow: hidden }
.c202507 .filterbox .filters { padding-left: 20px;
	padding-right: 20px }
.c202507 #aggregationform {
	position: relative;
	.group-title { position: relative; margin-top: 0 }
	.sidebar_um_search { margin-top: 0 }
	.box.sidebar_um_search,
	.box.sidebar_um_search.collapsed {
		background-color: white }
	.click-area { padding: .3em .8em }
	.click-area.has-selection { color: #0070c0 }
	.box.sidebar_um_search .group-title
	.area-title { width: 100%; float: none }
	.um_facettecontentcollapse { position: absolute;
		top: 1.8em; left: 0; background: #fcfcfd; z-index: 1;
		padding: 1em; box-sizing: border-box;
		border: 1px solid #eee; box-shadow: 4px 4px 7px #0001;
		overflow-y: scroll; max-height: 40vh }
	.sidebar_um_search ul.um_search_facette >
	li:nth-child(2n) { background: transparent }
	section.sidebar_um_search { margin: 15px;
		width: calc(50% - 30px) }
	.area-title { display: grid; grid-template: auto / auto 1em }
	.area-title-text { white-space: nowrap; text-overflow: ellipsis;
		overflow: hidden }

	.um_facettecontentcollapse {
		font-size: 85%;
		ul, li { list-style: none; margin: 0; padding: 0 }
		input[type=checkbox] { width: 2px; height: 2px;
			position: absolute; top: -50px; left: -300px }
		span.filter-keyword { position: relative; display: block;
			padding-left: 1.2em; overflow: hidden }
		span.filter-keyword::before { content: ''; display: block;
			position: absolute; top: .3em; left: 0em;
			width: .7em; height: .7em;
			border: 1px solid #a6a6a6; background: white }
		input[type=checkbox]:checked +
		span.filter-keyword::before { background: black }
	}
}

@media (min-width: 1200px) {
	.c202507 #aggregationform {
		section.sidebar_um_search {
			width: calc(20% - 30px) }
	}
	.c202507.cl-search #filter-sticky { position: sticky;
		top: 115px; z-index: 2; padding-top: 13px;
		background: #f2f2f2; margin-top: -13px }
}

@media (max-width: 1499px) {
	.c202507 .category-sticky { display: flex; position: fixed; z-index: 1001;
		width: 100%; left: 0; bottom: 0; padding-bottom: 2em;
		pointer-events: none;
		& > div { margin-inline: auto; border: 1px solid #ccc;
			border-radius: 12px; background: white;
			box-shadow: 1px 1px 25px #0007;
			text-align: center; flex: 0 0 content;
			padding: .8em .5em .2em .5em;
			pointer-events: auto }
		br { display: none }
		.titleanim { position: relative; margin-inline: .6em }
		.titleanim-hover { display: none; opacity: 0; pointer-events: none;
			position: absolute; bottom: 0; left: 50%;
			transform: translate(-50%, -100%);
			text-align: center; max-width: 700px; color: #002c52;
			font-size: 14px; font-weight: 600; white-space: nowrap;
			background: white; border: 1px solid #ccc;
			border-radius: 10px; padding: .9em .7em .8em .7em;
			filter: drop-shadow(1px 1px 10px #0003);
			will-change: transform, opacity }
		.titleanim-hover::after { position: absolute; left: 50%;
			bottom: -7px; border-top: 1px solid #ccc;
			border-left: 1px solid #ccc; background: white;
			width: 12px; height: 12px; content: '';
			transform: translate(-50%, 0) rotate(-135deg) }
		.titleanim:hover .titleanim-hover { display: block;
			animation: titleanim-fromtop 300ms ease-out both }
	}
}
@keyframes titleanim-fromtop {
	from { opacity: 0; transform: translate3d(-50%, calc(-100% - 20px), 0) }
	70% { opacity: .4 }
	to { opacity: 1; transform: translate3d(-50%, -100%, 0) }
}
@media (min-width: 1500px) {
	.c202507 .category-sticky { display: block; z-index: 0;
		position: absolute; top: 0;
		left: auto; bottom: auto; padding-bottom: 0;
		right: -90px; width: 70px;
		height: 100%;

		& > div { position: sticky; top: 128px;
			border: 1px solid #ccc;
			border-radius: 12px;
			background: white;
			box-shadow: 1px 1px 10px #0003;
			text-align: center;
			padding: .8em .8em .2em .8em }
		br { display: initial }
		.titleanim { position: relative; margin-inline: 0 }
		.titleanim-hover { display: none; opacity: 0; pointer-events: none;
			position: absolute; top: 50%; right: -23px;
			transform: translate(100%, -50%);
			text-align: left; max-width: 700px; color: #002c52;
			font-size: 14px; font-weight: 600; white-space: nowrap;
			background: white; border: 1px solid #ccc;
			border-radius: 10px; padding: .9em .7em .8em .7em;
			margin-left: 1em;
			filter: drop-shadow(1px 1px 10px #0003);
			will-change: transform, opacity }
		.titleanim-hover::after { position: absolute; top: 50%;
			left: -7px; border-top: 1px solid #ccc;
			border-left: 1px solid #ccc; background: white;
			width: 12px; height: 12px; content: '';
			transform: translate(0, -50%) rotate(-45deg) }
		.titleanim:hover .titleanim-hover { display: block;
			animation: titleanim-in 300ms ease-out both }
	}
}
@keyframes titleanim-in {
	from { opacity: 0; transform: translate3d(calc(100% + 20px), -50%, 0) }
	70% { opacity: .4 }
	to { opacity: 1; transform: translate3d(100%, -50%, 0) }
}