ul.products {

	li.product-category {

		.category_wrapper {

			.category_image {
				overflow: hidden;

				img {
					width: 100%;
					transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
				}	
				margin-bottom: rem-calc(20);

				@include breakpoint(medium down) {
					margin-bottom: rem-calc(15);
				}						
			}

			.category_details {

				a {
					color: #000;
				}

				.category-title {
		    		color: #000;
		    		font-size: 24px;
		    		line-height: 1.4;
		    		font-weight: 600 !important;	
		    		margin-bottom: 0;

		    		@include breakpoint(small only) {
			    		font-size: 20px;
			    		line-height: 1.2;	
		    		}			

					.count {
						display: none;
					}
				}

				.more-products {
					font-weight: 300;
					font-size: 16px;
					line-height: 1.6;
				}

			}

			&:hover {
				.category_image {

					img {
						transform: scale(1.08) !important;
					}
				}
			}


		}

	}

	&.category-grid-layout-2 {

		li.product-category {

			.category_wrapper {
				position: relative;

				.category_details {
				    position: absolute;
				    width: 100%;
				    bottom: 30px;
				    z-index: 3;

				    @include breakpoint(small only) {
				    	position: relative;

				    }

				    .more-products {
				    	opacity: 0;

				    	@include breakpoint(1024px down) {
							opacity: 1
				    	}
				    }

				    .category-title {
				    	div {
				    		overflow: hidden;

				    		span {
			    				opacity: 0;
			    				display: inline-block;
			    				position: relative;	
			    				
			    				@include breakpoint(1024px down) {
			    					opacity: 1
			    				}	
			    				
					    		&:after {
									width: 0;
									height: 1px;
									position: absolute;
									left: 0;
									bottom: 2px;
									content: " ";
									background-color: #000;
									-webkit-transition: width 1s cubic-bezier(.19,1,.22,1);
									-moz-transition: width 1s cubic-bezier(.19,1,.22,1);
									-o-transition: width 1s cubic-bezier(.19,1,.22,1);
									transition: width 1s cubic-bezier(.19,1,.22,1);	
									transition-delay: 0;

									@include breakpoint(small down) {
										display: none;
									}			    			
					    		}			    						    							    			
				    		}

							@for $i from 1 through 100 {
								&:nth-child(#{$i}) span:after {
									transition-delay: (.1s * $i);
								}
							}				    		
				    	}

			    		font-size: 40px;
			    		line-height: 1.2;
				    }	

				}

				&:hover {
					.category_details {
						.category-title {
							div {
								span {
									&:after {
										width: 100%;
									}
								}
							}
						}
					}
				}

			}

		}

	}

}