/*web story home page widget css*/
#body-section .container .left-sidebar .web_story_widget {
	margin:10px 10px 25px 11px !important;
	padding:10px 10px 50px 10px !important;
}
.webstory_nav_container{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:0;border-bottom:1px solid #dbdbdb;margin:0 0 10px;overflow:hidden;padding:0 0 5px}
.webstory_nav_container h2{color:#000;display:inline;font-size: 16px;font-weight: 700;font-family: var(--content-font-roboto);text-transform: uppercase;position: relative;}
.webstory_nav_container h2 a{color:#000;padding:0 15px 0 0;}
.webstory_nav_container .navlink{list-style-type:none;display:flex;flex-wrap:nowrap; overflow-x: auto; overflow-y: hidden; background-color:#fff;}
.webstory_nav_container .navlink li{padding:0 8px;color:#777;font-size:14px;font-weight:400;list-style:none;position:relative;border-left:1px solid #dbdbdb}
.webstory_nav_container .navlink li:first-child{border-left:0}
.webstory_nav_container .navlink li a{color:#777;text-decoration:none}
.webstorySlider{display:flex;flex-wrap:nowrap;width:100%; }
.webstorySlider .slick-slide img {
	width: 100%;
	height: 100%;
}
.webstorySlider .webstory-items{
	width:100%;
	width:100%;
	background-color:#ddd;
	position:relative;
	overflow:hidden;
}

.webstorySlider.audiostory_js_slider .webstory-items {background-color: transparent;}
.webstorySlider.webstory_js_slider .webstory-items {background-color: transparent;}
.webstorySlider .webstory-items a{display:block;color:#fff}
.webstorySlider .webstory-items figure{position:relative;color:#fff}
.webstorySlider .webstory-items figure figcaption{position:absolute;bottom:0;left:0;width:100%;padding:5px 10px;font-weight:700;color:#fff;font-size:15px;line-height:20px;padding-top:5px}
.webstorySlider .slick-prev,.webstorySlider .slick-next{width:31px;height:31px;background:url(https://indianexpress.com/wp-content/themes/indianexpress/images/exclusive-arrow.png) !important;z-index:99;text-indent:-9999px}
.webstorySlider .slick-next{background-position:-37px -1px !important;}
.webstorySlider .slick-prev {background-position: -1px -1px;}
.webstorySlider .slick-dots{bottom:-10px}
.webstorySlider .slick-dots li{width:10px;height:10px;margin:0 10px 0 0;border-radius:50%;background-color:#ddd}
.webstorySlider .slick-dots li.slick-active{background:red}
.webstorySlider .slick-dots li button:before{ display: none;}

.webstorySlider .gradient_slider{background-color: #fff;padding:10px;width: calc(100% - 16px); margin: -25px auto 0;position: relative;}
.webstorySlider .gradient_slider h4{color:#000;font-weight:400;font-size:14px;line-height:19px;font-family:'Droid Serif',serif;height: 76px;overflow: hidden;}

.bottom-pos{position:absolute;border:0;left:50%;bottom:-32px;transform:translate(-50%,0px);
	display:flex;justify-content:space-between;padding:0 22px;}
.bottom-pos .slick-dots{position:static;bottom:-4px}
.webstorySlider .slick-dots li:last-child{margin-right:0}
.webstorySlider .vidioicon {width:36px;height:36px;background-color:#f00;display:block;position:absolute;top:10px;right:10px;border-radius:50%;border:2px solid #fff}
.webstorySlider .vidioicon i{width:10px;height:15px;background-color:#fff;display:block;left:8px;top:9px;position:absolute}
.audio_gradient_slider {background: #fff;}
.audio_gradient_slider h4 {color: #000;font-size: 14px;font-weight: 700;padding: 5px 0;line-height: 18px;}
.webstorySlider .vidioicon i:before,
.webstorySlider .vidioicon i:after{
	content:"";
	background-color: #fff;
	position: absolute;
	border-radius: 1px;
}
.webstorySlider .vidioicon i:before{width:3px;height:13px;margin-top:1px;left:11px}
.webstorySlider .vidioicon i:after{width:3px;height:11px;margin-top:2px;left:15px}

@media screen and (min-width:769px){
.webstorySlider .slick-list{margin: 0 -10px;}
.webstorySlider .slick-slide{ width:203px;  margin:0 10px}
}

@media(max-width:768px){
	.web_story_widget { margin:0px !important; padding:0px 0px 30px 0px !important; }
	.webstorySlider {overflow-x: scroll;}
	.webstorySlider .webstory-items{margin-right: 20px;min-width: 180px; max-width:180px; width:100%;}
	.webstory_nav_container { display: block; flex-wrap: wrap; padding-bottom: 0;}

	.webstory_nav_container .navlink{ overflow:scroll;background-color:#fff;white-space: nowrap; margin: 12px 0 0; height:21px;}
	.webstorySlider .gradient_slider{width: calc(100% - 36px);}

	.webstory_nav_container .navlink li{ padding: 0; border-left: 0;}
	.webstory_nav_container .navlink li:first-child {padding-left: 0;}
	.webstory_nav_container .navlink li a {border-left: 1px solid #dbdbdb; padding: 0 12px; margin-top: 5px;}
	.webstory_nav_container .navlink li:nth-of-type(1) a{border-left: 0; padding-left: 0;}

	.webstory_nav_container h2 {display: block;background: #e9e9e9;border-left: 8px solid #a32020;margin: 0 0 10px;overflow: hidden;padding: 3px 0 3px 8px;max-width: 100%;width: 100%;}
	.webstory_nav_container h2 a{font-size: 18px;font-weight:700;}
}