ol.skate,
ul.skate,
ol.skate > li,
ul.skate > li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.skate {
	background: inherit;
	height: 100%;
	overflow: hidden;
	position: relative;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	width: 100%;
}

.skate, .skate ~ nav {
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

.skate > * {
	background: #FFF;
	height: 100%;
	overflow: auto;
	position: absolute;
	width: 100%;
}

.skate > * > * {
	overflow: auto;
}

.skate > * > a {
	display: block;
}

.skate nav,
.skate ~ nav {
	width: 100%;
}

.skate ~ nav { 
	position: relative;
}

.skate nav ul,
.skate nav ul li,
.skate ~ nav ul,
.skate ~ nav ul li {
	display: inline;
}

.skate-next-prev a {
	color: inherit;
	margin-top: -0.5em;
	position: absolute;
	text-decoration: none;
	top: 50%;
	z-index: 99;
}

.skate-prev {
	left: .25em;
}

.skate-next {
	right: .25em;
}

.skate-slide-navigation {
	bottom: 0;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 99;
}

.skate > .skate-target ~ :last-child,
.skate > :target ~ :last-child,
.skate > * {
	z-index: 1;
}

.skate > :last-child {
	z-index: 2;
}

.skate > .skate-target,
.skate > :target {
	z-index: 2;
}


/**

CROSSFADE

**/
[data-skate=crossfade].skate.skate-css > * {
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	transition: opacity .5s ease;
}

[data-skate=crossfade].skate.skate-css > .skate-target ~ :last-child,
[data-skate=crossfade].skate.skate-css > :target ~ :last-child,
[data-skate=crossfade].skate.skate-css > * {
	opacity: 0;
	z-index: 1;
}

[data-skate=crossfade].skate.skate-css > :last-child {
	opacity: 1;
}

[data-skate=crossfade].skate.skate-css > .skate-target,
[data-skate=crossfade].skate.skate-css > :target {
	opacity: 1;
	z-index: 2;
}




/**

SLIDE

**/
[data-skate=slide].skate.skate-css > * {
	opacity: 1;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: -webkit-transform .5s ease-in 0s, visibility 0s ease .5s;
	-moz-transition: -moz-transform .5s ease-in 0s, visibility 0s ease .5s;
	transition: transform .5s ease-in 0s, visibility 0s ease .5s;
}

[data-skate=slide].skate.skate-css > *.skate-target,
[data-skate=slide].skate.skate-css > *:last-child,
[data-skate=slide].skate.skate-css > *:target {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform .5s ease-in, visibility 0s ease;
	-moz-transition: -webkit-transform .5s ease-in, visibility 0s ease;
	transition: -webkit-transform .5s ease-in, visibility 0s ease;
}

[data-skate=slide].skate.skate-css > .skate-target ~ *,
[data-skate=slide].skate.skate-css > .skate-target ~ *:last-child,
[data-skate=slide].skate.skate-css > :target ~ *,
[data-skate=slide].skate.skate-css > :target ~ *:last-child {
	left: -200%;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s ease-in, visibility 0s ease .5s, left 0s ease .5s;
	-moz-transition: -moz-transform .5s ease-in, visibility 0s ease .5s, left 0s ease .5s;
	transition: transform .5s ease-in, visibility 0s ease .5s, left 0s ease .5s;
	visibility: hidden;
}




/**

CARDS

**/

[data-skate=cards].skate.skate-css > .skate-target ~ :last-child,
[data-skate=cards].skate.skate-css > *,
[data-skate=cards].skate.skate-css > :target ~ :last-child {
	-webkit-transform: translateY(120%) rotate(5deg);
	-moz-transform: translateY(120%) rotate(5deg);
	transform: translateY(120%) rotate(5deg);
	
	-webkit-transition: -webkit-transform .5s ease-in, z-index 0s ease .5s;
	-moz-transition: -moz-transform .5s ease-in, z-index 0s ease .5s;
	transition: transform .5s ease-in, z-index 0s ease .5s;
}

[data-skate=cards].skate.skate-css > *:nth-child(even) {
	-webkit-transform: translateY(120%) rotate(-5deg);
	-moz-transform: translateY(120%) rotate(-5deg);
	transform: translateY(120%) rotate(-5deg);
}

[data-skate=cards].skate.skate-css > * {
	-webkit-transition: -webkit-transform .5s ease-in 0s, z-index 0s ease .5s;
	-moz-transition: -moz-transform .5s ease-in 0s, z-index 0s ease .5s;
	transition: transform .5s ease-in 0s, z-index 0s ease .5s;
}

[data-skate=cards].skate.skate-css > .skate-target,
[data-skate=cards].skate.skate-css > :last-child,
[data-skate=cards].skate.skate-css > :target {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: z-index 0s ease .5s;
	-moz-transition: z-index 0s ease .5s;
	transition: z-index 0s ease .5s;
}