/*
You can type here custom CSS code, which will be loaded both on your admin and front-end pages. Please make sure to not override layout properties (positions and sizes), as they can interfere with the sliders built-in responsive functionality. Here are few example targets to help you get started:
*/

.ls-container { /* Slider container */

}

.ls-layers { /* Layers wrapper */ 

}

.ls-3d-box div { /* Sides of 3D transition objects */ 

}

custom CSS layer slider CH

/** 6-Apr-20-Waqas **/
/* Home Slider Product */
#sliders-container #layerslider_1 .ls-wrapper .woocommerce ul li.product{
	width: auto;
	box-shadow: 0px 0px 2px 2px #D3D3D3;
}
#sliders-container #layerslider_1 .ls-wrapper .woocommerce ul{
	display: flex;
  flex-direction: row;
}
@media(max-width: 800px) and (min-width: 501px){
	#layerslider_1 {
		height: 500px!important;
	}
	#layerslider_1 .ls-slide-backgrounds .ls-wrapper.ls-bg-outer {
		height: 500px!important;
	}
	#layerslider_1 .ls-slide-backgrounds .ls-wrapper.ls-bg-outer  img {
		height: 500px!important;
    object-fit: cover;
	}
}
@media(max-width: 500px){
	#layerslider_1 {
		height: 370px!important;
	}
	#layerslider_1 .ls-slide-backgrounds .ls-wrapper.ls-bg-outer {
		height: 370px!important;
	}
	#layerslider_1 .ls-slide-backgrounds .ls-wrapper.ls-bg-outer  img {
		height: 370px!important;
    object-fit: cover;
	}
}

#sliders-container #layerslider_1 .ls-wrapper .woocommerce ul li.product{
	background: rgba(255,255,255,.8) !important;
}

@media (min-width: 1px) and (max-width: 767px) {

	#layerslider_1 .ls-slide-backgrounds .ls-wrapper.ls-bg-outer{
		overflow: hidden;
	}
	
#layerslider-wrapper .ls-wrapper.ls-in-out{
left: 35px !important;
}
#layerslider-wrapper .ls-wrapper.ls-in-out h1{
font-size: 18px !important;
}
#layerslider-wrapper .onsale{
line-height: 29px !important;
}
	#sliders-container #layerslider_1 .ls-wrapper .woocommerce ul li.product{
		background: rgba(255,255,255,.8);
	}

}

span.featured-image {
    display: none;
}