.row-category{
	
	margin:0 0 1.5rem 0;
	padding:0;
	
	.product{
		position:relative;
	}
	h2{margin:0rem 0 3rem 0;}	
	h4{margin-bottom:1.5rem;font-size:0.875rem;}
	/*.inner{
		z-index:10;
		height:0;
		padding-bottom:100%;	
		position:relative;
		overflow:hidden;
		border:solid 1px $light-gray;
		margin-bottom:3rem;
		
		a{@include animate-element(1s);}
		a::after{@include animate-element(1s);content:"";position:absolute;top:0;right:0;bottom:0;left:0;}
		a:hover::after{background: rgba($black,0.1);}
	
		img{min-width:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);max-width:none;}
		
	
	}*/
	

	
	.inner{
		position:relative;
		height:0;
		padding-bottom:100%;
		margin-bottom:1.5rem;
		z-index:0;
		border:solid 1px $light-gray;
		cursor:pointer;
		@include animate-element();
		@include border-radius();

		strong{
			background-color:$primary-color;
			width:3.5rem;
			height:3.5rem;
			position:absolute;
			top:-0.75rem;
			right:-0.75rem;
			z-index:10;
			text-align: center;
			color:$white;
			line-height:3.5rem;
			border-radius:50%;
			transform:rotate(5deg); 
			
			@include animate-element();
			
			&::before{content:"€";font-family:arial;font-size:0.75rem;font-weight:normal;position:absolute;top:0;line-height:2rem;left:50%;transform:translateX(-50%);}
		}
		
		span{position:absolute;color:$dark-gray;bottom:1rem;z-index:100;font-size:0.75rem;display:block;margin:auto;left:50%;transform:translateX(-50%);}
		span::before{content:"";position:absolute;width:100%;height:1px;left:-110%;top:55%;border-top:solid 1px $medium-gray;margin-right:1rem;}
		span::after{content:"";position:absolute;width:100%;height:1px;left:-110%;top:55%;border-top:solid 1px $medium-gray;margin-right:1rem;}
		span::after{left:110%;}
		span.hoogte{right:0;bottom:auto;left:auto;top:50%;transform:rotate(-90deg) translateY(-50%);}
		
		&:hover{@include has-shadow(0.1,1rem);}
		&:hover strong{//background-color:$black;@include animate-element();
			transform:scale(1.2)rotate(5deg);
		}
	}
	
	
	.inner a{

		position: absolute; 
		top: 0%; 
		left: 0%; 
		width: 100%; 
		height: 100%;
		z-index:0;
		
		
		//&:hover{border:solid 1px $primary-color;@include animate-element();@include has-shadow();}
		
		
		img{
			position: absolute; 
			top: 0; 
			left: 0; 
			right: 0; 
			bottom: 0; 
			margin: auto; 
			min-width: 50%;
			min-height: 50%;
			z-index:0;
		}
		
	
	}
	
	
}