/* 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 h1 {

  font-size: 130px;

  position: absolute;

  top: 55%;

  left: 35%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  margin: 0;

  display: table;

  text-align: center;

/* text-shadow: 2px 2px 2px #999;*/

 font-family: Impact

}





.page-view .project .text h2 {

  font-size: 70px;

  position: absolute;

  top: 55%;

  left: 66%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  margin: 0;

  display: table;

  text-align: center;

  font-weight: 100;



}





















.page-view .project .text p {

font-size: 34px;

position: absolute;

top: 53%;

left: 56%;

margin: 0;

display: block; text-align: center;

font-weight: 100;

font-family:  "Trebuchet MS", Arial, Helvetica, sans-serif;



}







.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: 45%;

  left: 3%;

  z-index: 97;

  width: 94%;

  

}



.page-view .arrows .arrow {

  float: left;

  cursor: pointer;

}



.page-view .arrows .arrow.next {

  -webkit-transform: rotate(180deg);

  transform: rotate(180deg);

  margin-top: -11px;

  float: right;

}



.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: 50px;

  width:50px;

  padding: 10px;

  border-radius:25px;

  background: rgba(0,0,0,0.5);

}



.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: 0px;

  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 1 */



@font-face {

    font-family: 'besom';

    src: url('../fonts/besom/besom.eot');

    src: url('../fonts/besom/besom.eot?#iefix') format('embedded-opentype'),

         url('../fonts/besom/besom.woff2') format('woff2'),

         url('../fonts/besom/besom.woff') format('woff'),

         url('../fonts/besom/besom.ttf') format('truetype'),

         url('../fonts/besom/besom.svg#besom_2regular') format('svg');

    font-weight: normal;

    font-style: normal;

}



.demo-1 {

  background: url(../img/nature-sprite.png) no-repeat -9999px -9999px;

}



.demo-1 .page-view {

  background: url(../img/nature-sprite-2.png) no-repeat -9999px -9999px;

}



.demo-1 .page-view h1 {

  font-family: 'besom';

}



.demo-1 .page-view .project:nth-child(1) {

  background-image: url(../img/nature-1.jpg);

}



.demo-1 .page-view .project:nth-child(2) {

  background-image: url(../img/nature-2.jpg);

}



.demo-1 .page-view .project:nth-child(3) {

  background-image: url(../img/nature-3.jpg);

}



.demo-1 .page-view .project:nth-child(4) {

  background-image: url(../img/nature-4.jpg);

}



.demo-1 .page-view .project:nth-child(even).hide {

  -webkit-mask: url(../img/nature-sprite.png);

          mask: url(../img/nature-sprite.png);

  -webkit-mask-size: 2300% 100%;

          mask-size: 2300% 100%;

  -webkit-animation: mask-play 1.4s steps(22) forwards;

          animation: mask-play 1.4s steps(22) forwards;

}



.demo-1 .page-view .project:nth-child(odd).hide {

  -webkit-mask: url(../img/nature-sprite-2.png);

          mask: url(../img/nature-sprite-2.png);

  -webkit-mask-size: 7100% 100%;

          mask-size: 7100% 100%;

  -webkit-animation: mask-play 1.4s steps(70) forwards;

          animation: mask-play 1.4s steps(70) forwards;

}



/* DEMO 2 */

@font-face {

    font-family: 'adam';

    src: url('../fonts/adam/adam.eot');

    src: url('../fonts/adam/adam.eot?#iefix') format('embedded-opentype'),

         url('../fonts/adam/adam.woff2') format('woff2'),

         url('../fonts/adam/adam.woff') format('woff'),

         url('../fonts/adam/adam.ttf') format('truetype'),

         url('../fonts/adam/adam.svg#adam.cg_proregular') format('svg');

    font-weight: normal;

    font-style: normal;

}



.demo-2 {

  background: url(../img/building-sprite.png) no-repeat -9999px -9999px;

}



.demo-2 .page-view {

  background: url(../img/building-sprite-2.png) no-repeat -9999px -9999px;

}



.demo-2 .page-view h1 {

  text-transform: uppercase;

  letter-spacing: 5px;

  font-family: 'adam';

}



@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(../img/building-2.jpg);

}



.demo-2 .page-view .project:nth-child(2) {

  background-image: url(../img/building-3.jpg);

}









.demo-2 .page-view .project:nth-child(odd).hide {

  -webkit-mask: url(../img/building-sprite.png);

          mask: url(../img/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(../img/building-sprite-2.png);

          mask: url(../img/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;

}





/* DEMO 3 */

.demo-3 {

  background: url(../img/urban-sprite.png) no-repeat -9999px -9999px;

}



.demo-3 .page-view {

  background: url(../img/urban-sprite-2.png) no-repeat -9999px -9999px;

}



.demo-3 .page-view h1 {

  font-size: 180px !important;

  letter-spacing: 4px;

  text-shadow: 14px 0px rgba(1, 0, 0, 0.5);

}



.demo-3 .page-view .project:nth-child(1) {

  background-image: url(../img/urban-1.jpg);

}



.demo-3 .page-view .project:nth-child(2) {

  background-image: url(../img/urban-2.jpg);

}



.demo-3 .page-view .project:nth-child(3) {

  background-image: url(../img/urban-3.jpg);

}



.demo-3 .page-view .project:nth-child(4) {

  background-image: url(../img/urban-4.jpg);

}



.demo-3 .page-view .project:nth-child(odd).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;

}



.demo-3 .page-view .project:nth-child(even).hide {

  -webkit-mask: url(../img/urban-sprite-2.png);

          mask: url(../img/urban-sprite-2.png);

  -webkit-mask-size: 7400% 100%;

          mask-size: 7400% 100%;

  -webkit-animation: mask-play 1.4s steps(73) forwards;

          animation: mask-play 1.4s steps(73) 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;

}