.page-view {
	height:100%;z-index:1;width:100%;
	position: absolute;
	top: 0;
	left: 0
}

.page-view .project {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover
}

.page-view .project .text h1 {
	font-size: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin: 0;
	display: table;
	text-align: center
}

.page-view .project .text p {
	font-size: 16px;
	position: absolute;
	bottom: 40px;
	right: 60px;
	margin: 0
}

.page-view .project:nth-child(1) {
	z-index: 30
}

@media screen and (max-width:640px) {
	.page-view .project .text h1 {
		font-size: 36px
	}

	.page-view .project .text p {
		bottom: 20px;
		margin: 0;
		text-align: center;
		width: 100%;
		right: auto;
		font-size: 14px
	}
}

.page-view .arrows {
	position: absolute;
	bottom: 50px;
	left: 100px;
	z-index: 100
}

.page-view .arrows .arrow {
	float: left;
	cursor: pointer
}

.page-view .arrows .arrow.next {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	margin-top: -11px
}

.page-view .arrows .arrow:hover.previous {
	-webkit-transition: -webkit-transform .4s cubic-bezier(.25,.46,.45,.94);
	transition: transform .4s cubic-bezier(.25,.46,.45,.94);
	-webkit-transform: translate3d(-5px,0,0);
	transform: translate3d(-5px,0,0)
}

.page-view .arrows .arrow:hover.next {
	-webkit-transition: -webkit-transform .4s cubic-bezier(.25,.46,.45,.94);
	transition: transform .4s cubic-bezier(.25,.46,.45,.94);
	-webkit-transform: translate3d(5px,0,0) rotate(180deg);
	transform: translate3d(5px,0,0) rotate(180deg)
}

.page-view .arrows .arrow svg {
	height: 40px;
	width: 25px;
	padding: 2px
}

.page-view .arrows .arrow svg polygon {
	fill: #fff
}

.page-view .arrows .arrow {
	-webkit-transition: -webkit-transform .3s cubic-bezier(.55,.085,.68,.53);
	transition: transform .3s cubic-bezier(.55,.085,.68,.53);
	margin-right: 10px;
	margin-top: -5px
}

@media screen and (max-width:640px) {
	.page-view .arrows {
		bottom: 60px;
		left: 50%;
		z-index: 120;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%)
	}

	.page-view .arrows .arrow.previous:hover {
		-webkit-transform: none;
		transform: none
	}

	.page-view .arrows .arrow.next:hover {
		-webkit-transform: translate3d(0,0,0) rotate(180deg);
		transform: translate3d(0,0,0) rotate(180deg)
	}
}

@-webkit-keyframes mask-play {
	from {
		-webkit-mask-position: 0% 0;
		mask-position: 0% 0
	}

	to {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0
	}
}

@keyframes mask-play {
	from {
		-webkit-mask-position: 0% 0;
		mask-position: 0% 0
	}

	to {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0
	}
}
 
.demo-3 {
	background: url(../image/urban-sprite11.png?11) no-repeat -9999px -9999px
}

.demo-3 .page-view {
	background: url(../image/urban-sprite-22.png?11) no-repeat -9999px -9999px
}

.demo-3 .page-view h1 {
	font-size: 180px!important;
	letter-spacing: 4px;
	text-shadow: 14px 0 rgba(1,0,0,.5)
}
 

.demo-3 .page-view .project:nth-child(odd).hide {
	-webkit-mask: url(../image/urban-sprite11.png?11);
	mask: url(../image/urban-sprite11.png?11);
	-webkit-mask-size: 3000% 100%;
	mask-size: 3000% 100%;
	-webkit-animation: mask-play 1.4s steps(29) forwards;
	animation: mask-play 1.4s steps(29) forwards
}

.demo-3 .page-view .project:nth-child(even).hide {
	-webkit-mask: url(../image/urban-sprite11.png?11);
	mask: url(../image/urban-sprite11.png?11);
	-webkit-mask-size: 3000% 100%;
	mask-size: 3000% 100%;
	-webkit-animation: mask-play 1.4s steps(29) forwards;
	animation: mask-play 1.4s steps(29) forwards
}

.no-cssmask .page-view .project.hide {
	opacity: 0;
	-webkit-transition: opacity 1.4s ease;
	transition: opacity 1.4s ease;
	-webkit-mask: none!important;
	mask: none!important
}