/*-- Frame Style --*/

.frame {
  	height: 100%;
  	width: 280px;
  	display: block;
  	margin: 0 auto;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	display: inline-block;
	margin: 0;
}
.frame ul li {
	float: left;
	width: 273px; 
	margin: 0 10px 0 0;
	cursor: pointer;
	text-align: center;
}

/*-- Content Style --*/
.slidee img {
	box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
	margin-bottom: 10px;
}

/* Buttons */

.prev, .next {
	border: none;
	background: none;
	position: relative;
	top: -14px;
}

.prev img, .next img {
	height: 12px;
}

.prev:focus, .next:focus {
	outline: none;
}

/* Scrollbar */

.scrollcontainer {
	text-align: center;
	margin: 10px 0 40px 0;
}

.scrollbar {
	margin: 1em 0;
	width: 197px;
	height: 2px;
	background: #000;
	line-height: 0;
	display: inline-block;
}

.scrollbar .handle {
	width: 50px;
	height: 100%;
	cursor: pointer;
}

.scrollbar .handle img {
	position: relative;
	float: left;
	top: -9px;
	height: 20px;
}

/* Media Queries */

@media (min-width: 568px) {
	.frame {
		width: 513px;
	}
	.frame ul li {
		width: 249px;
	}
	.scrollbar {
		width: 432px;
	}
}

@media (min-width: 768px) {
	.frame {
		width: 713px;
	}
	.frame ul li {
		width: 349px;
	}
	.scrollbar {
		width: 462px;
	}
}

@media (min-width: 1024px) {
	.frame {
		width: 960px;
	}
	.frame ul li {
		width: 312px;
	}
	.scrollbar {
		width: 600px;
	}
}