body { background: #0; }
.container { margin: 0 auto; }

.wrap {
	position: relative;
	margin: 3em 0;
}

.frame {
	height: 800px;
	line-height: 800px;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.frame ul li {
	float: left;
	width: 1280px;
	margin: 0 1px 0 0;
	padding: 0;
	background: #0;
	color: #0;
	text-align: center;
	cursor: pointer;
}
.frame ul li div {
	/* This height migh seem redundant, but because its possible for
	the div to appear empty it can get collapsed causing havoc with
	sly. Specifying height here ensures it does not get collapsed */
	height: 800px;
	position: relative;
}
.frame ul li div img.slyde {
	width: auto;
	height: auto;
	max-width: 1280px;
	max-height:  800px;
	opacity:0.3;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
}
.frame ul li.active div img.slyde {
	opacity:1;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
}
.frame ul li div:hover .hide{
	display:block;
}
.frame ul li div .hide{
	display:none;
}
.frame ul li div h2{
    position: absolute;
    top: 10%;
    left:10%;
    padding: 10px;
    color: white;
    font: bold 24px Sans-Serif;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}
.frame ul li div p{
    position: absolute;
    bottom: 10%;
    padding: 10px;
    color: white;
    font: bold 18px Sans-Serif;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

/* Scrollbar */
.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}
/* Controls */
.controls {
	margin: 25px 0; text-align: center;
}