.hp-boxes-cont { background: #009847; padding-bottom: 1px; }
.hp-boxes { background: #dadada; overflow: hidden; -webkit-box-shadow: inset -1px 0 0 #009847; box-shadow: inset -1px 0 0 #009847; position: relative; }
.hp-box { display: inline-block; background: #fff; width: 100%; float: left; z-index: 20; position: relative; }
.hp-box.double { width: 100%; }
.hp-boxes-empty {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
	overflow: hidden;
}
.hp-box-empty { display: inline-block; background: #dadada; width: 100%; }
.hp-box, .hp-box-empty { -webkit-box-shadow: -1px -1px 0 #009847; box-shadow: -1px -1px 0 #009847; }
.hp-box:after, .hp-box-empty:after { content: ' '; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; border-right: 1px solid #009847; border-bottom: 1px solid #009847; z-index: 5; }
.hp-box:before, .hp-box-empty:before { content: ' '; display: block; margin-top: 100%; }

.hp-box:hover, .hp-box:focus { z-index: 100; }
.hp-box a:hover, .hp-box a:focus {
	-webkit-box-shadow:
		inset 1px 1px 0 #009847,
		inset -2px -2px 0 #009847,
		-1px -1px 0 1px #009847,
		0 -1px 0 1px #009847,
		0 0 0 1px #009847,
		-1px 0 0 1px #009847;
	box-shadow:
		inset 1px 1px 0 #009847,
		inset -2px -2px 0 #009847,
		-1px -1px 0 1px #009847,
		0 -1px 0 1px #009847,
		0 0 0 1px #009847,
		-1px 0 0 1px #009847;
}

.hp-box-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.hp-box .label {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #fff;
	padding: 15px 20px 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: #282828;
}
.hp-box .label a { text-decoration: none; display: inline-block; max-height: 76px; overflow: hidden; color: #282828; }
.hp-box .label:before { content: ' '; display: block; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: #fff; position: absolute; top: -20px; left: 50%; margin-left: -10px; }
.hp-box:hover .label, .hp-box:hover .label a { text-decoration: underline !important; color: #282828; }
.hp-box .link-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
.hp-box .icon { position: absolute; right: 0; top: 0; }
.hp-box .icon img { display: block; position: absolute; right: 0; top: 0; }

.hp-box.filter {  }
.hp-box.filter .filter-link { position: absolute; left: 0; top: 0; width: 66%; height: 100%; padding: 20px; color: #622a91; text-decoration: none; text-transform: uppercase; font-size: 34px; line-height: 38px; font-weight: bold; -webkit-transform: scale(.8,1); -ms-transform: scale(.8,1); -o-transform: scale(.8,1); transform: scale(.8,1); -webkit-transform-origin: 20px 20px; -moz-transform-origin: 20px 20px; -ms-transform-origin: 20px 20px; -o-transform-origin: 20px 20px; transform-origin: 20px 20px; }
.hp-box.filter:hover .filter-link { text-decoration: underline; }

.hp-box-empty-modul {

}
.hp-box-empty-modul:after, .hp-box-empty-modul:before { content: none; }

@media (max-width: 651px) {
	/*.hp-box.double img { width: auto; }*/
	/*.hp-box.double { padding-bottom: 50%; }*/
}
                /* 226*2+200 */
@media (min-width: 652px) {
	.hp-box, .hp-box-empty { width: 50%; }
	.hp-box.double { width: 100%; }
}
                /* 283*2-1+200 */
@media (min-width: 765px) {
	.hp-box, .hp-box-empty {
		width: 33.333333%;
		width: -webkit-calc(1/3*100%);
		width:         calc(1/3*100%);
	}
	.hp-box.double {
		width: 66.666666%;
		width: -webkit-calc(2/3*100%);
		width:         calc(2/3*100%);
	}
}
@media (min-width: 1048px) {
	.hp-box, .hp-box-empty { width: 25%; }
	.hp-box.double { width: 50%; }
}
				/* 283*4-1+200 */
@media (min-width: 1331px) {
	.hp-box, .hp-box-empty { width: 20%; }
	.hp-box.double { width: 40%; }
}
@media (min-width: 1614px) {
	.hp-box, .hp-box-empty {
		width: 16.666667%;
		width: -webkit-calc(1/6*100%);
		width:         calc(1/6*100%);
	}
	.hp-box.double {
		width: 33.333334%;
		width: -webkit-calc(2/6*100%);
		width:         calc(2/6*100%);
	}
}
@media (min-width: 1897px) {
	.hp-box, .hp-box-empty {
		width: 14.285714%;
		width: -webkit-calc(1/7*100%);
		width:         calc(1/7*100%);
	}
	.hp-box.double {
		width: 28.571429%;
		width: -webkit-calc(2/7*100%);
		width:         calc(2/7*100%);
	}
}
@media (min-width: 2180px) {
	.hp-box, .hp-box-empty {
		width: 12.5%;
	}
	.hp-box.double {
		width: 25%;
	}
}