.homepage-title {background-color:#f6f6f6}
.homepage-title h1 {font-size:14px; color:#999; padding-top:40px}

.top-categories-list {position:relative; background-color:#fff; margin:40px auto 70px auto;  display:flex; flex-flow:wrap}
.top-categories-list .box { flex:0 0 25%; box-shadow:inset -1px -1px 0 #f6f6f6}
.top-categories-list a.top {display:table; padding:35px 40px 0 40px; color:#231f20; font-size:18px; font-family:Roboto, sans-serif; font-weight:700; text-decoration:none}
.top-categories-list .icon {display:table-cell; width:50px; height:50px}
.top-categories-list .icon img {width:auto; height:auto; max-width:50px; max-height:50px}
.top-categories-list h2 {display:table-cell; padding-left:15px; vertical-align:middle; font-size:18px; font-family:Roboto, sans-serif; font-weight:700}
.top-categories-list .bottom {display:flex; flex-wrap:wrap; padding:30px 40px 40px 40px}
.top-categories-list a.sub-title {color:#999; font-size:14px; padding:5px 9px 5px 0; box-sizing:border-box}
.top-categories-list a.sub-title.hidden {display:none}
.top-categories-list a.sub-title:hover {color:#000; text-decoration:none}
.top-categories-list a.sub-title-all {padding:5px 0 5px 0; color:var(--color-01-hex); font-size:14px}
.top-categories-list a.sub-title-all:hover {text-decoration:none}
.top-categories-list a.sub-title-all span {display:inline-block; background:url(/templates/b2c/images/arrow-blue.png); width:6px; height:9px; margin-left:5px}
.top-categories-list .box.banner {text-align:center}
.top-categories-list .box.banner a {display:block}
.top-categories-list .box.banner img {width:calc(100% - 2px); height:auto; max-width:478px; margin-bottom:1px}

.top-categories-list .side-icons {position:absolute; top:50px; right:-110px}
.top-categories-list .side-icons span {display:block; margin-bottom:60px}

.manufacturers {display:flex; background-color:#fff; border-bottom:1px #ccc dotted; text-align:center; padding-bottom:40px; box-shadow:0 40px 0 #fff}
.manufacturers a.logo {flex-grow:1; height:150px; background-repeat:no-repeat; background-position:center center; background-size:60%; transition:all 100ms ease}
.manufacturers a.logo:hover {filter:brightness(1.1)}
.manufacturers-more {margin-top:-30px; text-align:center}
.manufacturers-more a {display:inline-block; background-color:#fff; text-decoration:none}


@media only screen and (max-width:1600px) {
	.homepage-title h1 {padding:15px 40px 0 40px}
	.top-categories-list {margin:15px auto 0 auto; box-shadow:inset 0 -1px 0 #f6f6f6}
	.top-categories-list .side-icons {display:none}
}

@media only screen and (max-width:1080px) {
	.top-categories-list .box { flex:0 0 calc(100% / 3)}
	.top-categories-list .bottom {}
	.top-categories-list a.sub-title {font-size:15px}
}

@media only screen and (max-width:820px) {
	.top-categories-list .box {flex: 0 0 50%}
}

@media only screen and (max-width:600px) {
	.top-categories-list a.top {padding:15px 25px 15px 25px}
	.top-categories-list .bottom {padding:0 25px 25px 25px}
	.top-categories-list a.sub-title {padding:8px 12px 8px 0}
	.top-categories-list a.sub-title-all {padding:8px 0 8px 0}
}


@media only screen and (max-width:980px) {
	.homepage-title h1 { padding: 15px 20px 0 20px }
}

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

	.top-categories-list .box { flex:0 0 100%}
	.top-categories-list a.top {padding:15px 15px 20px 15px}
	.top-categories-list .bottom {padding:0 15px 10px 15px}
	.top-categories-list a.sub-title {width:calc(100% / 3); padding:8px 30px 8px 0}
}

@media only screen and (max-width:420px) {
	.top-categories-list a.sub-title {width:50%}
}

@media only screen and (max-width:1080px) {
	.manufacturers a.logo {height:120px}
	.manufacturers a.logo:nth-child(6), .manufacturers a.logo:nth-child(7) {display:none}
}