@charset "utf-8";
/* CSS Document */

.wrap.katalog{padding-top:3em;}

#katalog, #katalog #kategorie-header,#katalog #kategorie-product{
	/*display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 1.5em;
    grid-row-gap: 0.5em;*/
}

#katalog.one-col{
	grid-auto-rows:auto;
	max-width:1080px;
	margin:0 auto;}
	
#katalog #kategorie-product{
	clear:both;
}

#katalog hr{
	visibility:hidden;
	margin:2em;
	padding:0;
	clear:both;}

#katalog #kategorie-header{
	width:100%;
	grid-column-gap: 0;
}

#katalog .category-main{
	width:30%;
	height:45vh;
    display: inline-block;
    clear: both;
    margin: 0% 1.5% 6%;
    padding: 2em;
	overflow:hidden;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
	position:relative;
	border-radius: 2px;
	background-color: rgba(255,255,255,0.5);
}

.fullwidth #katalog .category-main{width:97%; height:45vh;}

#katalog .category-main div{    
	width:100%;
	height:95%;
	overflow:hidden;
	-moz-transition: all 0.3s;
 	-webkit-transition: all 0.3s;
  	transition: all 0.3s;
	background-size:contain;
    background-position: center center;
	background-repeat:no-repeat;
	}

#katalog .category-main div img{
	width:100%;
	height:auto;
}

#katalog .category-main:hover div{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

#katalog .category-main  a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	margin:0;
	font-size:1.5em;
}
#katalog .category-main  a h2{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-color:#222;
	color:#ffdd05;
	padding:0.5em 0;
	margin:0;
	font-weight:normal;
}


#katalog .category{
	    width: 33.3%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 3em;
    display: block;
    float: left;
}

#katalog .category img{
	width:100%;
	height:auto;
}

#katalog .category h2{
	text-align:center;
	margin:0;
	padding:0.3em 0;
	font-size:1em;
	color:#fff;
	background-color:#ccc;
	bottom:0;
	position:absolute;
	width:100%;
	border-bottom: 3px solid #cccccc;
	border-top: 3px solid #cccccc;
	transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	-webkit-transition:all 0.5s ease-in-out;
}

#katalog .category h2:after{
	content:'';
	display:block;
	position:absolute;
	left:50%;
	bottom:-13px;
	margin-left:-10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #ffde05 transparent;
		transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

#katalog .category p{ bottom:300px; position:absolute; background:rgba(0,0,0,0.8); color:#fff; padding:1.5em; margin-bottom:4em;
border-bottom: 3px solid #ffdd05;
	transition:bottom 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	-webkit-transition:bottom 0.5s ease-in-out;}

#katalog .category:hover h2, #katalog .category.selected h2{background-color:#222; color:#ffdd05;border-bottom: 3px solid #ffdd05;border-top: 3px solid #222;}
#katalog .category:hover ~ #katalog .category h2{background-color:#222;}




#katalog .category:hover h2:after, #katalog .category.selected h2:after{bottom:0;}

#katalog .category:hover p{  bottom:0;}

#katalog .category-description{margin:2em 0;}

#katalog .produkt{
	width:48%;
	height:24vh;
	display:inline-block;
	margin:0.3vw;
	padding:0.6em;
	padding-bottom:2em;
	overflow:hidden;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
	position:relative;
	border-radius: 2px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

#katalog .produkt  a{
	text-align:center;
	    display: block;
    width: 100%;
    height: 95%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#katalog .produkt a h2{
	font-size:1em;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-color:#ccc;
	color:#fff;
	padding:0.5em 0;
	margin:0;
	font-weight:normal;
			transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;

}

#katalog .produkt:hover{background-color:rgba(255,255,255,0.7);box-shadow: 0px 0px 8px rgba(0,0,0,0.35);}
#katalog .produkt:hover a h2{background-color:#222; color:#ffdd05;}

.produkt-content .row{
	border-top:1px solid #f5d400;
	line-height:2em;
	 padding:0 1em;
}

.produkt-content .row:nth-child(even){background-color: rgba(245, 212, 0, 0.03);}

.produkt-content .row .title{display:inline-block; width:35%;}
.produkt-content .row .value{display:inline-block; width:64%;}

#katalog .bottom-menu{width:100%; text-align:center;}
#katalog .bottom-menu .widget{padding:0;}
#katalog .bottom-menu .widget ul li {display:inline-block;    border-right: 1px solid #f5d400;    border-bottom:none;}
#katalog .bottom-menu .widget ul li.current-menu-item > a:before, #katalog .bottom-menu .widget ul li.current-menu-parent > a:before {content:none;}



@media screen and (min-width: 48em) {
.fullwidth #katalog .category-main{width:30%; height:45vh;}
#katalog .category h2{

	font-size:1.5em;}
	
	#katalog .produkt{width:23.6%;}
}