/* COMMON DEMO STYLE */

.page-view {

  height: 550px;

  width: 100%;

  min-width:1200px;

  overflow:hidden;

 

}



.page-view .project {

  position: absolute;

  width: 100%;

  height: 550px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  min-width:1200px;

}



.page-view .project .text h1 {

  font-size: 100px;

  position: absolute;

  top: 50%;

  left: 50%;

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

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

  margin: 0;

  display: table;

  text-align: center;

}



.page-view .project .text p {

  font-size: 16px;

  position: absolute;

  bottom: 40px;

  right: 60px;

  margin: 0;

}



.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: relative;

  top:500px;

  margin-left:50%;

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



@font-face {

    font-family: 'besom';

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

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

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

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

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

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

    font-weight: normal;

    font-style: normal;

}



.demo-1 {

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

}



.demo-1 .page-view {

  background: url(../images/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(../images/nature-1.jpg);

}



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

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

}



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

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

}



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

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

}



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

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

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

          mask: url(../images/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('../other/adam.eot');

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

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

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

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

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

    font-weight: normal;

    font-style: normal;

}



.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 h1 {

  text-transform: uppercase;

  letter-spacing: 16px;

  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(../images/building-1.jpg);

}



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

  background-image: url(../images/building-2.jpg);

}



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

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

}



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

  background-image: url(../images/building-4.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;

}





/* DEMO 3 */

.demo-3 {

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

}



/*.demo-3 .page-view {

  background: url(../images/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(../images/banner-1.jpg);

}



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

  background-image: url(../images/banner-2.jpg);

}



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

  background-image: url(../images/banner-3.jpg);

}



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

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

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

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

}

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

  background-image: url(../images/banner-4.jpg);

}