/* ======================================================================================================================================================
# Responsive
====================================================================================================================================================== */
	
	
	
	@media only screen and (min-width: 990px) {
		
		#top .portfolio-cat-slider ul.category_list {margin: 0 !important; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
	
	}
	
	
	@media only screen and (min-width: 990px) and (max-width: 1367px) {
				
		.responsive #top .portfolio-cat-slider ul li .cat_img {margin-bottom: 1.275rem; width: 100px; height: 100px;}
		.responsive #top .portfolio-cat-slider ul li .cat_img img {height: 100px;}
			
	}
		
		
		
	@media only screen and (min-width: 480px) and (max-width: 989px) {
				
		.responsive #top .portfolio-cat-slider ul.category_list {margin: 0 0 15px 0 !important; grid-template-columns: repeat(3, 1fr); gap: 1rem;}
		.responsive #top .portfolio-cat-slider ul li .cat_name {font-size: 14px;}
			
	}
		


	
		

	@media only screen and (max-width: 479px) and (max-width: 767px) {
		
		.responsive #top .portfolio-cat-slider ul.category_list {

			display: flex !important; margin: 0 0 0 -10px; padding: 10px; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #1a1a1a #f1f1f1;
			
			li {padding: 0.5rem; min-width: calc(100% / 1.5);}
			
			li .cat_info {top: 0.5rem; left: 0.5rem;}
			li .cat_info:hover:after {top: 110%; bottom: auto; left: 0; transform: translateX(0);}
			
			li h3 {font-size: 13px;}
			
			li .buttons-row {flex-direction: column; gap: 0.5rem;}
			li .buttons-row a {padding: 0.375rem 1rem;}
			
		}
		
			

		
	}
	
	
	#top .portfolio-cat-slider ul li span.image-overlay {display: none; visibility: hidden;}
	
	
/* ======================================================================================================================================================
# Home Products Small Category
====================================================================================================================================================== */
	

	
		
		
    /* Horizontal slider styling */
	#top .portfolio-cat-slider {position: relative;}
	
	#top .portfolio-cat-slider ul.category_list {
		
		display: grid; margin: 0 0 15px 0; padding: 2vh 0 0 0; width: 100%;
		
		li {display: flex; margin: 0; padding: 1.175rem; flex-direction: column; background: #ffffff; box-shadow: 0 0 8px 0 rgba(0,0,0,15%); transition: all 0.3s ease;}
		li:hover {box-shadow: 0 0 25px 0 rgba(0,0,0,0.1);}
				
		li .cat_image {position: relative; display: flex; margin-bottom: 0.375rem; padding: 0; align-items: center; justify-content: center;}
		
		li .cat_info {
			display: flex; position: absolute; top: 1rem; left: 1rem; width: 44px; height: 44px; background: #e6a978;
			justify-content: center; align-items: center; font-size: 24px; color: #000; cursor: help; border-radius: 50%; z-index: 10;
		}
		li .cat_info:hover:after {
			content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); padding: 0.675rem; 
			width: 150px; background: #1a1a1a; line-height: 1.35; font-size: 11px; color: #fff; border-radius: 4px; z-index: 99;
		}
		
		li .empty-img {font-size: 12px;}
		
		li h3 {position: relative; margin: 0; line-height: 1.3; font-size: 16px; font-weight: 600; color: #3a3a3a;}
		li h3 span {font-weight: 400; color: #6a6a6a;}
		

		
		li .buttons-row {
			
			display: flex; align-items: center; gap: 1rem; margin-top: 10px; overflow: hidden;
			
			a {display: flex; padding: 0.5rem 1rem; width: 100%; font-size: 13px; font-weight: 500; justify-content: center; color: #3e3e40; transition: all 0.3s ease;}
			a.btn-check {border: solid 1px #3e3e40;}
			a.btn-config {
				gap: 0.5rem; background: #e6aa78; border: solid 1px #e6aa78;
				&:after {content:'\e855'; font-family:'entypo-fontello';}
			}
			
			a:hover {background: #3e3e40 !important; color: #fff; border: solid 1px #3e3e40;}
			
		} 
		
		
		li span.image-overlay {display: none !important;}
		
		
	}