/* COMMON DEMO STYLE */
.page-view {
  height: 550px;
  width: 100%;
  position:relative;
  top: 50px;
  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 .arrows {
  position: absolute;
  top:50%;  
   margin-top:-44px;
  z-index: 50;
}

.page-view .arrows .arrow {
  cursor: pointer;
}
.page-view .arrows .previous img{  position:absolute;left:80px;}
.page-view .arrows .next img{position:absolute;left:1250px;ri ght:100px;}

@media screen and (max-width: 640px) {
  
  .page-view .arrows .arrow.previous:hover {
    -webkit-transform: none;
            transform: none;
  }
  .page-view .arrows .arrow.next:hover {
    -webkit-transform: none;
            transform: none;
  }
}

@-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;
  }
}


/* SPECIFIC DEMO STYLE */

/* DEMO 2 */
.demo-2 {
  background: url(../images/building-sprite.png) no-repeat -9999px -9999px;
}

.demo-2 .page-view {
  background: url(../images/building-sprite-2.png) no-repeat -9999px -9999px;
}


.demo-2 .page-view .project:nth-child(1) {
  background-image: url(../images/banner1.jpg);
}

.demo-2 .page-view .project:nth-child(2) {
  background-image: url(../images/banner2.jpg);
}

.demo-2 .page-view .project:nth-child(3) {
  background-image: url(../images/banner3.jpg);
}

.demo-2 .page-view .project:nth-child(odd).hide {
  -webkit-mask: url(../images/building-sprite.png);
          mask: url(../images/building-sprite.png);
  -webkit-mask-size: 7500% 100%;
          mask-size: 7500% 100%;
  -webkit-animation: mask-play 1.4s steps(74) forwards;
          animation: mask-play 1.4s steps(74) forwards;
}

.demo-2 .page-view .project:nth-child(even).hide {
  -webkit-mask: url(../images/building-sprite-2.png);
          mask: url(../images/building-sprite-2.png);
  -webkit-mask-size: 8400% 100%;
          mask-size: 8400% 100%;
  -webkit-animation: mask-play 1.4s steps(83) forwards;
          animation: mask-play 1.4s steps(83) forwards;
}



/* Fallback */
.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;
}