:root{
    --orange-light: #D8A72B;
    --darkgrey: #333; 
    --green-light: #435a29;
    --grey-light: #edf2fa;
}



/* - - - - - - - - - - - */
.dyn-cat-img{       height: 15rem;          zzwidth: auto;      zzbackground: white;   transition-duration: .4s; 
}
.dyn-cat-img:hover{
    filter: saturate(110%) brightness(103%) contrast(105%); 
    /*filter: grayscale(1%) brightness(.95) contrast(95%);*/
}

.dyn-fx-catprod{
	text-align: center;
    position: relative;     
    border: 1px solid #ddd;
    transition: all .4s;

    height: 100%;

    background-color: var(--grey-light);
 }
 .dyn-fx-catprod:hover{     
    border: 1px solid var(--green-light); transform: translateY(-1px);
 }
 .dyn-fx-catprod::before{     
    position: absolute; content:"";
    background-color: var(--green-light);
    top: -1px; bottom: -1px; left: 0;
    width: 0;
    transition: .4s;
    z-index: -1;
 }
 .dyn-fx-catprod:hover::before{
    left: -5px;     
    width: 5px;
 }

/* - - - - - - - - - - - */

.dyn-text-prod-name {       font-size: 1.1rem; 
	background: white; border-radius: .5rem; border: 1px solid var(--green-light);
	color: var(--green-light);
}
.dyn-text-prod-desc {       line-height: 1.2;   font-weight: 300;           font-size: 1rem;     }

/* - - - - - - - - - - - */


.category_list .ct_item-active{
	background: var(--darkgrey);
    color: white;
}

.products-list{
	transition: all .4s;
}

.product-item{
	transition: all .4s;
}

/* RESPONSIVE */

@media screen and (max-width: 1100px){
	.products-list .product-item{
		/*width: 30.3%;*/
		color:inherit;
	}
}

@media screen and (max-width: 900px){
	.category_list,
	.products-list{
		width: 100%;
	}

	.category_list{
		flex-direction: row;
		justify-content: space-between;
	}

	.category_list .category_item{
		align-self: flex-start;
		/*width: 15%;
		font-size: 14px;*/
	}

	.products-list .product-item{
		/*margin-left: 4.5%;*/
		color:inherit;
	}

	.products-list .product-item:nth-child(3n+1){
		margin-left: 0px;
	}
}

@media screen and (max-width: 700px){
	.category_list{
		flex-direction: column;
	}
	.category_list .category_item{
		/*width: 46%;*/
		/*margin-bottom: 10px;*/
		transition:0s;
	}
}

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

	.products-list .product-item{
		color:inherit;
		/*width: 47.5%;*/
	}

	.products-list .product-item:nth-child(3n+1){
		color:inherit;
		/*margin-left: 4.5%;*/
	}

	.products-list .product-item:nth-child(2n+1){
		color:inherit;
		/*margin-left: 0px;*/
	}

}

@media screen and (max-width: 350px){
	.products-list .product_item{
		width: 40%;
		margin-left: 0px;
	}
}