@charset "utf-8";



body {

  height: 100vh;

  background: #f8f8f8;

  margin: 0;

  font: 14px / 1.5 'Roboto',sans-serif;

}



h1 { margin:150px auto 30px auto;}



[class^=page] {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

}



.page1 {

  background-image: url(https://www.jqueryscript.net/dummy/4.jpg);

}

.page1 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/4.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page2{

  background-image: url(https://www.jqueryscript.net/dummy/5.jpg);

}

.page2 h1:before{

  background-image: url(https://www.jqueryscript.net/dummy/5.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page3 {

  background-image: url(https://www.jqueryscript.net/dummy/6.jpg);

}

.page3 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/6.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page4 {

  background-image: url(https://www.jqueryscript.net/dummy/7.jpg);

}

.page4 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/7.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page5 {

  background-image: url(https://www.jqueryscript.net/dummy/8.jpg);

}

.page5 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/8.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page6 {

  background-image: url(https://www.jqueryscript.net/dummy/9.jpg);

}

.page6 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/9.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page7 {

  background-image: url(https://www.jqueryscript.net/dummy/10.jpg);

}

.page7 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/10.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}

.page8 {

  background-image: url(https://www.jqueryscript.net/dummy/1.jpg);

}

.page8 h1:before {

  background-image: url(https://www.jqueryscript.net/dummy/1.jpg),linear-gradient(to right, #fff 100%, #fff 100%);

}





[class^=page] {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.page-wrapper h1 {

  padding: 1em 3em;

  overflow: hidden;

  background: rgba(255,255,255,.5);

  display: inline-block;

}

/*

.page-wrapper h1 span {

  display: inline-block;

  position: relative;

  z-index: 9;

}*/

/*

.page-wrapper h1:before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  -webkit-filter: blur(6px);

  filter: blur(6px);

  background-color: #fff;

  opacity: .8;

  /*background-size: cover;*/

  /*padding: 10vh 30vw;

  box-sizing: border-box;

  background-clip: content-box;

}*/