.page-view {
    height:100vh; 
    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:nth-child(1) {
    z-index: 30
}
.page-view .project img{
    width: 100%;
}
@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 0.4s cubic-bezier(0.25, .46, 0.45, .94);
    transition: transform 0.4s cubic-bezier(0.25, .46, 0.45, .94);
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0)
}
.page-view .arrows .arrow:hover.next {
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, .46, 0.45, .94);
    transition: transform 0.4s cubic-bezier(0.25, .46, 0.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 0.3s cubic-bezier(0.55, .085, 0.68, .53);
    transition: transform 0.3s cubic-bezier(0.55, .085, 0.68, .53);
    margin-right: 10px;
    margin-top: -7px
}
@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
    }
}
.mainV {
    background: url('../img/urban-sprite.png') no-repeat -9999px -9999px
}
.mainV .page-view {
    background: url('../img/urban-sprite.png') no-repeat -9999px -9999px
}
.mainV .page-view .project.hide {
    -webkit-mask: url('../img/urban-sprite.png');
    mask: url('../img/urban-sprite.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
}