ul {
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.75) 0 1px 12px;
	display: inline-block;
	left: 7.5%;
	margin: 0;
	padding: 61.3% 0 0 0;
	position: relative;
	width: 85%;
}
	
	ul:before {
		background-color: rgba(233, 0, 0, 0.7);
		border-bottom-left-radius: 4px;
		color: #fff;
		content: "paused";
		display: block;
		font-size: 0.7em;
		font-weight: 700;
		right: 0;
		opacity: 0;
		padding: 0.2em 0.4em;
		position: absolute;
		text-align: center;
		text-transform: uppercase;
		top: 0;
		z-index: 2;
	}
	
	ul:hover:before {
		opacity: 1;
	}
	
	ul img {
		display: block;
		margin: 0 auto;
		width: 100%;
	}
	
	ul:hover li,
	ul:hover img {
		/* 
			NOTE: This property is being considered for removal from the spec 
			@see: http://www.w3.org/TR/css3-animations/#the-animation-play-state-property-
		*/
		-webkit-animation-play-state: paused;
		-moz-animation-play-state: paused;
	}

li {
	left: 1.5%;
	list-style: none inside;
	overflow: hidden;
	position: absolute;
	top: 1.9%;
	width: 97%;
}

/* - Special styles for the Falling demo - */

ul:last-of-type {
	background-color: transparent;
	box-shadow: none;
	display: inline-block;
	margin: 0;
	position: relative;
}

	ul:last-of-type li {
		-webkit-animation-duration: 16s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease;
		-moz-animation-duration: 16s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: ease;
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
		display: inline-block;
		left: 0;
		margin: 0;
		padding: 1.5%;
		top: 0;
	}
	
	ul:last-of-type li:nth-of-type(1) {
		-webkit-animation-name: fallThree;
		-moz-animation-name: fallThree;
		top: 2%;
		-webkit-transform: rotate(-1deg);
		-moz-transform: rotate(-1deg);
	}
	
	ul:last-of-type li:nth-of-type(2) {
		-webkit-animation-name: fallTwo;
		-moz-animation-name: fallTwo;
		top: 2%;
		-webkit-transform: rotate(1.5deg);
		-moz-transform: rotate(1.5deg);
	}
	
	ul:last-of-type li:nth-of-type(3) {
		-webkit-animation-name: fallOne;
		-moz-animation-name: fallOne;
		top: 1%;
	}

/* - Falling animations -*/
	
@-webkit-keyframes fallOne {
	0%, 30% { 
		opacity: 1; 
		top: 1%;
		-webkit-transform: rotate(0deg);
	}
	
	35%, 94% { 
		opacity: 0;
		top: 120%;
		-webkit-transform: rotate(-13deg);
	}
	
	94.0001%, 96% { 
		opacity: 0;
		top: -100%;
		-webkit-transform: rotate(-13deg);
	}
	
	100% {
		opacity: 1; 
		top: 1%;
		-webkit-transform: rotate(0deg);
	}
}

@-webkit-keyframes fallTwo {
	0%, 65% { 
		opacity: 1;
		top: 2%;
		-webkit-transform: rotate(1.5deg);
	}
	
	70%, 94% { 
		opacity: 0;
		top: 120%;
		-webkit-transform: rotate(13deg);
	}
	
	94.0001%, 96% { 
		opacity: 0;
		top: -100%;
		-webkit-transform: rotate(13deg);
	}
	
	100% {
		opacity: 1;
		top: 2%;
		-webkit-transform: rotate(1.5deg);
	}
}

@-webkit-keyframes fallThree {
	0%, 91% { 
		opacity: 1;
		top: 2%;
		-webkit-transform: rotate(-1deg);
	}
	
	95% { 
		opacity: 0;
		top: 120%;
		-webkit-transform: rotate(-10deg);
	}
	
	95.0001%, 96% { 
		opacity: 0;
		top: -100%;
		-webkit-transform: rotate(10deg);
	}
	
	100% {
		opacity: 1;
		top: 2%;
		-webkit-transform: rotate(-1deg);
	}
}

@-moz-keyframes fallOne {
	0%, 30% { 
		opacity: 1; 
		top: 1%;
		-moz-transform: rotate(0deg);
	}
	
	35%, 94% { 
		opacity: 0;
		top: 120%;
		-moz-transform: rotate(-13deg);
	}
	
	94.0001%, 96% { 
		opacity: 0;
		top: -100%;
		-moz-transform: rotate(-13deg);
	}
	
	100% {
		opacity: 1; 
		top: 1%;
		-moz-transform: rotate(0deg);
	}
}

@-moz-keyframes fallTwo {
	0%, 65% { 
		opacity: 1;
		top: 2%;
		-moz-transform: rotate(1.5deg);
	}
	
	70%, 94% { 
		opacity: 0;
		top: 120%;
		-moz-transform: rotate(13deg);
	}
	
	94.0001%, 96% { 
		opacity: 0;
		top: -100%;
		-moz-transform: rotate(13deg);
	}
	
	100% {
		opacity: 1;
		top: 2%;
		-moz-transform: rotate(1.5deg);
	}
}

@-moz-keyframes fallThree {
	0%, 91% { 
		opacity: 1;
		top: 2%;
		-moz-transform: rotate(-1deg);
	}
	
	95% { 
		opacity: 0;
		top: 120%;
		-moz-transform: rotate(-10deg);
	}
	
	95.0001%, 96% { 
		opacity: 0;
		top: -100%;
		-moz-transform: rotate(10deg);
	}
	
	100% {
		opacity: 1;
		top: 2%;
		-moz-transform: rotate(-1deg);
	}
}
	
/* - Fade In/Out -*/

ul:first-of-type li {
	-webkit-animation-duration: 12s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-duration: 12s;
	-moz-animation-iteration-count: infinite;
	opacity: 0;
}

ul:first-of-type li:first-child {
	-webkit-animation-name: fadeOne;
	-moz-animation-name: fadeOne;
	opacity: 1;
}

ul:first-of-type li:nth-of-type(2) {
	-webkit-animation-name: fadeTwo;
	-moz-animation-name: fadeTwo;
}

ul:first-of-type li:nth-of-type(3) {
	-webkit-animation-name: fadeThree;
	-moz-animation-name: fadeThree;
}

@-webkit-keyframes fadeOne {
	0%, 30% { opacity: 1; }
	33%, 94% { opacity: 0; }
	97%, 100% { opacity: 1; }
}

@-webkit-keyframes fadeTwo {
	0%, 30% { opacity: 0; }
	33%, 63% { opacity: 1; }
	66%, 100% { opacity: 0; }
}

@-webkit-keyframes fadeThree {
	0%, 63% { opacity: 0; }
	66%, 94% { opacity: 1; }
	97%, 100% { opacity: 0; }
}

@-moz-keyframes fadeOne {
	0%, 30% { opacity: 1; }
	33%, 94% { opacity: 0; }
	97%, 100% { opacity: 1; }
}

@-moz-keyframes fadeTwo {
	0%, 30% { opacity: 0; }
	33%, 63% { opacity: 1; }
	66%, 100% { opacity: 0; }
}

@-moz-keyframes fadeThree {
	0%, 63% { opacity: 0; }
	66%, 94% { opacity: 1; }
	97%, 100% { opacity: 0; }
}

/* - Slide In/Out -*/

ul:nth-of-type(2) {
	z-index: 3;
}

ul:nth-of-type(2) img {
	-webkit-animation-duration: 14s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	-moz-animation-duration: 14s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease;
	position: relative;
}

ul:nth-of-type(2) li:nth-of-type(1) img {
	-webkit-animation-name: slideOne;
	-moz-animation-name: slideOne;
	left: 0;
}

ul:nth-of-type(2) li:nth-of-type(2) img {
	-webkit-animation-name: slideTwo;
	-moz-animation-name: slideTwo;
	left: 100%;
}

ul:nth-of-type(2) li:nth-of-type(3) img {
	-webkit-animation-name: slideThree;
	-moz-animation-name: slideThree;
	left: 100%;
}

@-webkit-keyframes slideOne {
	0%, 30% { left: 0; }
	33%, 94% { left: -100%; }
	94.0001%, 97% { left: 100%; }
	97%, 100% { left: 0; }
}

@-webkit-keyframes slideTwo {
	0%, 30% { left: 100%; }
	33%, 63% { left: 0; }
	66%, 100% { left: -100%; }
}

@-webkit-keyframes slideThree {
	0%, 63% { left: 100%; }
	66%, 94% { left: 0; }
	97%, 100% { left: -100%; }
}

@-moz-keyframes slideOne {
	0%, 30% { left: 0; }
	33%, 94% { left: -100%; }
	94.0001%, 97% { left: 100%; }
	97%, 100% { left: 0; }
}

@-moz-keyframes slideTwo {
	0%, 30% { left: 100%; }
	33%, 63% { left: 0; }
	66%, 100% { left: -100%; }
}

@-moz-keyframes slideThree {
	0%, 63% { left: 100%; }
	66%, 94% { left: 0; }
	97%, 100% { left: -100%; }
}

/* - General page styles -*/

body {
	background-color: #1f1f1f;
	color: #e2e2e2;
	font-family: 'ff-dagny-web-pro-1', 'ff-dagny-web-pro-2', 'helvetica neue', helvetica, sans-serif;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

body > div {
	margin: 0 auto;
	max-width: 960px;
	overflow: hidden;
	width: 95%;
}

header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: block;
	margin: 0 auto;
	width: 85%;
}

	header p {
		color: #cecece;
		font-size: 0.9em;
		margin: 0;
		padding: 0.5em 0 1em 0;
	}

h1 {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0;
	padding: 0.4em 0 0 0;
	text-shadow: rgba(255, 255, 255, 0.09) 0 1px 0;
	text-transform: uppercase;
}

h2 {
	font-size: 1em;
	font-weight: 400;
	margin: 4em auto 0.5em auto;
	padding: 0;
	width: 85%;
}

	h2:first-of-type {
		margin-top: 2.4em;
	}

footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: block;
	margin-top: 2em;
	margin: 2em auto 0 auto;
	padding: 1em 0 1.4em 0;
	text-align: right;
	width: 85%;
}

a {
	color: #e3e3e3;
	display: inline-block;
	font-size: 0.8em;
	text-decoration: none;
}

	a:hover {
		background-color: #fff;
		color: #1f1f1f;
	}