/* COMMON DEMO STYLE */
.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 .text h1 {text-align: center;}
.page-view .project .text p {font-size: 20px;color: #fff;font-family: 'Montserrat';font-weight: 500;padding: 10px 20px;text-align: center;}
.text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 986px;width: 100%;margin: 0 15px;background: rgba(0, 0, 0, 0.8);transform: translateY(50px);opacity: 0;transition: all 0.6s ease;}
@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 .bullets {position: absolute;bottom: calc(50% - 17px);left: 20px;z-index: 100;right: 20px;display: flex;justify-content: space-between;align-items: center;}
.page-view .bullets .arrow {float: left;cursor: pointer;}
.page-view .bullets .arrow.next {-webkit-transform: rotate(180deg);transform: rotate(180deg);margin-top: -11px;}
.page-view .bullets .arrow:hover.previous {-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);-webkit-transform: translate3d(-5px, 0, 0);transform: translate3d(-5px, 0, 0);}
.page-view .bullets .arrow:hover.next {-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);-webkit-transform: translate3d(5px, 0, 0) rotate(180deg);transform: translate3d(5px, 0, 0) rotate(180deg);}
.page-view .bullets .arrow svg {height: 40px;width: 25px;padding: 2px;}
.page-view .bullets .arrow svg polygon {fill: #fff;}
.page-view .bullets .arrow {-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);transition: transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);margin-right: 10px;margin-top: -7px;}
@media screen and (max-width: 640px) {
  .page-view .bullets {bottom: 60px;left: 50%;z-index: 120;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
  .page-view .bullets .arrow.previous:hover {-webkit-transform: none;transform: none;}
  .page-view .bullets .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 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;}
@media screen and (max-width: 640px) {
  .demo-2 .page-view h1 {letter-spacing: 4px;}
}
.demo-2 .page-view .project:nth-child(1) {background-image: url(../images/slide1.jpg);}
.demo-2 .page-view .project:nth-child(2) {background-image: url(../images/slide2.jpg);}
.demo-2 .page-view .project:nth-child(3) {background-image: url(../images/slide3.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 */
.outdated .page-view .project.hide {opacity: 0;-webkit-transition: opacity 1.4s ease;transition: opacity 1.4s ease;-webkit-mask: none !important;mask: none !important;}