/* COMMON DEMO STYLE */
.page-view { height: 100vh; width: 100vw; 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 { width:80%; position: absolute; top: 40%; left: 10%;margin: 0; display: table; color:#FFF; text-transform:uppercase;}

.page-view .project .text p{ font-size: 3.12vw; font-family:"Arial Black", Gadget, sans-serif; font-style:italic;}
.page-view .project .text span{ display:block; font-size:1.5vw; text-align:center; font-style:normal;}

.page-view .project .text div{ width:27rem; overflow:hidden; margin-top:1.5vw;}
.page-view .project .text div img{ width:100%; vertical-align:top;}

.page-view .project:nth-child(1) { z-index: 30; }
 @media screen and (max-width: 1024px) {
.page-view .project .text{ width:inherit;}
.page-view .project .text p { font-size: 24px; }
.page-view .project .text span{ font-size:16px;}
.page-view .project .text div{ width:60%; overflow:hidden; margin:10px auto 0 auto;}
}
.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, 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 .arrows .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 .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, 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 .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; }
}
/* 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(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; }