.category-content:hover a {color: #003399;}
.category-content:hover {border: 1px solid #DDD; box-shadow: 0 1px 0px rgba(0, 0, 0, 0.075) inset, 0 0 8px #DDD;}
h2 a {text-decoration:none; color: #003399;}		
.category{width:calc(100%/3)}
.header-height{height:40px}
.image-height{height:150px}
.description-height{height:80px}
.usage-height{height:45px}
.detail-height{height:190px}
.af-text{width:33%}
.gesamt-rating{padding-right:50px; margin-right:30px}
.af-pic3{display:none}		

#MainContent {
	position: relative;
}

#konfigurator {
	position: absolute;
	top: 0;
	right: 0;
	width: 35%;
}

.PageFrame {
	padding: 0;
	margin-top: 30px;
	border: none;
}

.tmatrix tr:nth-child(2n) {
	background-color: #f3f3f3;
}

.tmatrix table, .tmatrix td, .tmatrix th {
	border: 1px solid #c1c1c1;
}

.tmatrix td, .tmatrix th {
	text-align: center;
	width: 100px;
	vertical-align: middle;
}

.font{font-size:14px}
.tmatrix tr{height:26px}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	.width{width:33.33%}
}

@media only screen and (max-width: 768px){
	.detail-height{height:230px}
	.af-pic1{display:none}
	.image-height{height:100%}
	.description-height{height:100px}
	.usage-height{height:60px}
	.category{width:50%}
	.af-text{width:50% !important}
	.af-pic1{display:none}

}

@media only screen and (max-width: 480px){
	.category{width:100%; height:auto !important;}
	.detail-height{height:150px}
	.description-height{height:90px}
	.usage-height{height:60px}
	.af-text{width:100% !important }			
	.gesamt-rating{padding-right:5px; padding-left:5px; margin:0px auto}
	.af-pic2{display:none}
	.af-pic3{display:block}
	.font{font-size:12px}
}

@media only screen and (max-width: 400px){
	.detail-height{height:220px}
	.description-height{height:70px}
	.usage-height{height:50px}
}