html, body {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

/* Slides */
.slides {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.slides .slide {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-transition: top 1500ms ease;
	   -moz-transition: top 1500ms ease;
		-ms-transition: top 1500ms ease;
		 -o-transition: top 1500ms ease;
			transition: top 1500ms ease;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}

/* Transitions */
.slides .active { top: 0; }
.slides .old    { top: -200%; }

/* Imagry */
.slides .slide img {
	width: 100%;
	min-height: 100%;
}

/* Colors */
.slides .a { background: #bada55; }
.slides .b { background: #ff00ff; }
.slides .c { background: #ccc; }
.slides .d { background: #222; }
	
.slides .bullets {
	position: absolute;
	top: 50%;
	z-index: 950;
	margin-top:-45px;
}

.slides .bullets .bullet {
	cursor: pointer;
	display: block;
	margin: 0 0 21px;
	width: 31px;
	height: 31px;
	position: relative;
}

.slides .bullets .bullet:after {
	content: '';
	width: 7px;
	height: 7px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #fff;
	position: absolute;
	left: 10px; 
	top: 10px;
}

.slides .bullets .bullet.active:after {
	background: #fff;
}