.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(../images/urban-sprite11.png) no-repeat -9999px -9999px}

.demo-3 .page-view {background: url(../images/urban-sprite-22.png) 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(../images/urban-sprite11.png);mask: url(../images/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(../images/urban-sprite11.png);mask: url(../images/urban-sprite11.png);-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}