#intro { position:relative; }
#intro .bg,
#intro .bg2 { position:absolute; top:0; left:0; width:100%;
	height:100%; background-position:50% 50%; z-index:1;
	background-repeat:no-repeat; background-size:cover; }
#intro .bg2 { z-index:2; opacity:0; transition:opacity 1s; }
#intro .bg2.show { opacity:1; }
#intro .headline,
#intro ul { position:relative; z-index:3; }

#intro ul li.active a,
#intro ul li a:hover { color:white; }
#intro ul li.connectors.active a,
#intro ul li.connectors a:hover {
	background-color:#85bc22; }
#intro ul li.thermal-management.active a,
#intro ul li.thermal-management a:hover {
	background-color:#10bae7; }
#intro ul li.cable-assembly.active a,
#intro ul li.cable-assembly a:hover {
	background-color:#f59c00; }
#intro ul li.it-network-products.active a,
#intro ul li.it-network-products a:hover {
	background-color:#919191; }
#intro ul li.spectrum.active a,
#intro ul li.spectrum a:hover {
	background-color:#ffed00; color:#0068b4;}

#areaintro .partfinderbox { padding:30px 0; }
#areaintro .partfinderbox.connectors {
	background-color:#85bc22; }
#areaintro .partfinderbox.thermal-management {
	background-color:#10bae7; }
#areaintro .partfinderbox.cable-assembly {
	background-color:#f59c00; }
#areaintro .partfinderbox.it-network-products {
	background-color:#919191; }

#productgroup { margin:0; }
#prodcounts { text-transform:none; margin-top:0; font-size:20px; }
#filterheadline { text-transform:none; text-align:left; }
#filters { padding:0 15px; }
#filters .filter { border:1px solid transparent; margin-bottom:10px; }
#filters .filter .title { padding-left:20px; position:relative; }
html.js #filters .filter .title { cursor:pointer; }
#filters .filter .title:before { display:block; content:"";
	width:10px; height:10px; position:absolute; top:7px; left:0;
	transition:all 0.2s;
	background:url(../img/caret-white.svg) 50% 50% no-repeat;
	background-size:contain; transform:rotate(-90deg); }
#filters .filter.open .title:before { transform:rotate(0deg); }
#filters .filter .selected { padding-left:20px; }
#filters .filter .sel { display:inline-block; padding-right:25px;
	text-decoration:none; position:relative; margin-right:15px;
	white-space:nowrap; }
#filters .filter .sel:hover { text-decoration:underline; }
#filters .filter .sel:before,
#filters .filter .sel:after { display:block; content:"";
	position:absolute; top:50%; right:0; width:20px; height:2px;
	margin-top:-1px; background-color:white; }
#filters .filter .sel:before { transform:rotate(45deg); }
#filters .filter .sel:after { transform:rotate(-45deg); }

#filters .filter .body { overflow:hidden; }
#filters .filter .value { position:relative; padding-left:20px;
	cursor:pointer; display:block; transition:color 0.2s;
	white-space:nowrap; }
#filters .filter .value.disabled { cursor:default; }
#filters .filter .value input { display:block; position:absolute;
	top:5px; left:1px; width:8px; height:8px;
	background-color:white; border:none; -webkit-appearance:none;
	-moz-appearance:none; appearance:none; }
#filters .filter .value input:checked:after { display:block;
	content:""; position:absolute; top:2px; left:2px; width:4px;
	height:4px; background-color:black; }

#filters .filter .inputs { display:flex; }
#filters .filter .inputs .valuesearch { flex:0 0 auto;
	padding:2px 5px; box-sizing:border-box; width:100px;
	border:none; }
#filters .filter .inputs .separator { padding:0 10px;
	flex:0 0 auto; }
#filters .filter .button { margin-top:10px; }

#filterreset a { display:inline-block; position:relative;
	padding-right:30px; text-decoration:none; }
#filterreset a:hover { text-decoration:underline; }
#filterreset a:before,
#filterreset a:after { position:absolute; top:50%; right:0;
	width:20px; height:2px; background-color:white;
	margin-top:-1px; display:block; content:""; }
#filterreset a:before { transform:rotate(45deg); }
#filterreset a:after { transform:rotate(-45deg); }

#filters.connectors label.value:hover { color:#85bc22; }
#filters.thermal-management label.value:hover {
	color:#10bae7; }
#filters.cable-assembly label.value:hover {
	color:#f59c00; }
#filters.it-network-products label.value:hover {
	color:#919191; }
#filters label.value.disabled:hover { color:#919191; }
#filters a.customerspecific { display:block; white-space:nowrap;
	margin:10px 0; }

#selected { margin:10px 0; }
#selected a { display:inline-block; margin:0 10px 10px 0;
	padding:10px 30px 10px 10px; text-decoration:none;
	white-space:nowrap; border:1px solid white;
	border-radius:100px; position:relative; }
#selected a:before,
#selected a:after { display:block; content:""; height:1px;
	width:15px; position:absolute; right:10px; top:50%;
	background-color:white; }
#selected a:before { transform:rotate(45deg); }
#selected a:after { transform:rotate(-45deg); }

.tilecontent table td { vertical-align:bottom; }

#categories { padding-top:0; }
#categories .category { display:block;
	border:1px solid #0068b4; background-color:white;
	border-collapse:collapse; box-sizing:border-box;
	position:relative; }
#categories .category.disabled:after { display:block; content:"";
	position:absolute; top:0; left:0; width:100%; height:100%;
	background-color:rgba(0,0,0,0.50); }
#categories .category .main { padding:15px; }
#categories .category .main .image { display:none; }
#categories .category .main .info { text-align:left; }
#categories .category .main .info .name { font-size:20px;
	color:#0068b4; }
#categories .category .main .info .amount { color:#838586; }
#categories .category .overlay { display:none; }
#categories .category .overlay .name { font-size:30px;
	line-height:1em; }
#categories .category .overlay .amount { font-size:20px;
	font-weight:200; margin-top:10px; }
#categories .category:hover .overlay { opacity:0.5; }

#categories .category.connectors .overlay {
	background-color:#85bc22; }
#categories .category.thermal-management .overlay {
	background-color:#10bae7; }
#categories .category.cable-assembly .overlay {
	background-color:#f59c00; }
#categories .category.it-network-products .overlay {
	background-color:#919191; }

@media (min-width:500px) {
	#filters .filter .body { scrollbar-width:thin;
		scrollbar-color:black #919191; max-height:50vw;
		width:50vw; }
	#filters .filter .body::-webkit-scrollbar { width:5px;
		background-color:#919191; }
	#filters .filter .body::-webkit-scrollbar-thumb {
		background-color:black; }
	#filters .filter .body::-webkit-scrollbar-button,
	#filters .filter .body::-webkit-scrollbar-corner,
	#filters .filter .body::-webkit-resizer { display:none; }
	html.js #filters .filter .body { overflow-y:auto; }
	#categories { display:flex; flex-wrap:wrap; }
	#categories .category { flex:0 0 50%; overflow:hidden; }
	#categories .category:before { display:block; content:"";
		height:0; padding-bottom:100%; }
	#categories .category .main { position:absolute; top:0;
		left:0; width:100%; height:100%; display:flex;
		flex-direction:column; padding:0; }
	#categories .category .main .image { flex:1 1 auto;
		position:relative; display:block; }
	#categories .category .main .image img { display:block;
		position:absolute; top:0; left:0; width:100%; height:100%;
		object-fit:contain; }
	#categories .category .main .info { flex:0 0 auto;
		padding:15px; text-align:center; box-sizing:border-box; }
	#categories .category .overlay { position:absolute; top:0;
		left:0; width:100%; height:100%; display:flex;
		flex-direction:column; justify-content:center;
		color:white; opacity:0; transition:opacity 0.3s;
		text-align:center; }
}
@media (min-width:750px) {
	#categories .category { flex:0 0 33.33%; }
}
@media (min-width:800px) {
	#filterheadline { white-space:nowrap; }
	#filters { padding:0; }
	#filters .filter { position:relative; display:inline-block;
		margin:0 10px 0 0; }
	#filters .filter .header { padding:5px 10px; }
	#filters .filter.open .header { background-color:white;
		color:black; }
	#filters .filter .title { box-sizing:border-box;
		padding-left:20px; }
	#filters .filter.open .title::before {
		background-image:url(../img/caret-black.svg); }
	#filters .filter .body { position:absolute; top:100%;
		max-height:300px; width:auto; box-sizing:border-box;
		z-index:10; background-color:white; color:black;
		box-shadow:4px 4px 3px rgba(0,0,0,0.5); min-width:110%;
		opacity:0; visibility:hidden; padding:0; }
	#filters .filter .body .inner { padding:10px 20px 10px 10px; }
	#filters .filter.open .body { opacity:1; visibility:visible; }
	#filters .filter .value input { border:1px solid black; }
	#filters .filter .value.disabled input { border-color:#919191; }
	#filters .filter .value input:checked:after { top:1px;
		left:1px; }
	#filters .filter .inputs .valuesearch {
		border:1px solid black; }
	#filters .filter .button { color:black; border-color:black;
		display:block; width:100%; }
	#filters .filter .button:hover { color:white;
		background-color:black; }
	#prodcounts { font-size:30px; }
	#findercols { align-items:flex-end; }
	#artnosearch { margin-bottom:0.3em; margin-left:30px;
		max-width:500px; }
	#artnosearch .field label { flex:0 0 auto; padding-right:15px; }
}
@media (min-width:1000px) {
	#categories .category { flex:0 0 25%; }
}
@media (min-width:1200px) {
	#artnosearch { margin-bottom:0.6em; }
	#prodcounts { font-size:50px; }
}