@charset "utf-8";

body {
	margin:0;
}
.slider{
	position: relative;
	width: 100%;
	max-width: 820px;
	height: 100%;
	max-height: 450px;
	top: -13px;
	left: 10px;
	overflow: hidden;
	border:2px solid #2dd786;
	box-sizing:border-box;
	box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.slides{
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.slides a{
	width: 100%;
	flex-shrink: 0;
}

.slides img{
	width: 100%;
	transition: transform 0.3s ease;
}

.controls{
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
}

.control{
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	padding: 10px;
	cursor: pointer;
	border-radius: 50%;
}

.play-pause{
	position: relative;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 20px;
}

.description{
	position: absolute;
	bottom: -15px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	text-align: center;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
}
.slider1{
	position: absolute;
	width: 100%;
	max-width: 390px;
	height: 100%;
	max-height: 315px;
	top: 35px;
	left: 10px;
	overflow: hidden;
	border:2px solid #2dd786;
	box-sizing:border-box;
	box-shadow:0 10px 30px rgba(0,0,0,.3);
}
#content-slider1 {
	position:absolute;
	overflow:hidden;
	width:390px;
	height:315px;
	top:34px;
	left:10px;
	border:2px solid #2dd786;
	box-sizing:border-box;
	box-shadow:0 10px 30px rgba(0,0,0,.3);
}
#carousel1 ul {
	list-style: none;
	width: 390px;
	margin: 0;
	padding: 0;
	position: relative;
}
#carousel1 li {
	display:inline;
	float:left;
}
#carousel1 ul li a img{
	width:390px;
	height:315px;
}
span {
	color:#FFF;
	font-family:Segoe UI, Century Gothic, sans-serif;
	font-size:16px;
	font-weight:normal;

}

/*Progress Bar */
#progress86450977, .ic-progress-bar{
	position: absolute; 
	bottom: 0px; 
	left: 0px; 
	z-index: 1; 
	width: 298.26821702142px; 
	height: 5px; 
	opacity: 0.6; 
	display: block; 
	overflow: hidden; 
	background: rgb(187, 187, 187);
}

#thumbs86450977{
	position:relative;
	overflow:auto;
	clear:left;
	text-align:left;
	padding-top:5px;
}

/********************************** Start of Responsive Styles *********************************************/

@media (max-width:1200px){
	.slider{
		width: 100%;
		max-width: 720px;
	}
	#content-slider1 {
		width: 100%;
		max-width: 330px;
	}
	#carousel1{
		width: 100%;
		max-width: 330px;
	}
	#carousel1 ul li img{
		width: 100%;
		max-width: 330px;
	}
}
@media (max-width:1100px){
	.slider{
		width: 100%;
		max-width: 620px;
		height: 100%;
		max-height: 410px;
		top: -6px;
	}
	#content-slider1 {
		width: 100%;
		max-width: 330px;
	}
	#carousel1{
		width: 100%;
		max-width: 295px;
	}
	#carousel1 ul li img{
		width: 100%;
		max-width: 295px;
	}
}
@media (max-width:1000px){
	.slider{
		width: 100%;
		max-width: 522px;
		height: 100%;
		max-height: 356px;
		
	}
	#content-slider1 {
		width: 100%;
		max-width: 245px;
	}
	#carousel1{
		width: 100%;
		max-width: 245px;
	}
	#carousel1 ul li img{
		width: 100%;
		max-width: 245px;
	}
}
@media (max-width:900px){
	.slider {
		width: 100%;
		max-width: 422px;
		height: 100%;
		max-height: 302px;
		top: -24px;
	}
	#content-slider1 {
		width: 100%;
		max-width: 195px;
	}
	#carousel1{
		width: 100%;
		max-width: 195px;
	}
	#carousel1 ul li img{
		width: 100%;
		max-width: 195px;
	}
}