body{
  padding: 0;
  margin: 0;
}

h1{
  font: 300%/150% "Georgia";
  color: #000;
  text-align: center;
  padding: 20px;
  text-shadow: 0px 0px 10px #ffffff;
}

img{
  width: 100vw;
  height: 100vh;
}

.parallax-wrap{
  perspective: 100px;
  
  /* for webkit based browsers such as Safari  */
  -webkit-perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.panel{
  position: absolute;
  height: 100vh;
  top:0;
  bottom:0;
  right: 0;
  left: 0;
}
/*-------------Scrolling Panels-------------------*/
/*---image---*/
.panel.one{
  z-index: 100;
  height: 100vh;
  transform: translateZ(-100px) scale(2);
  -webkit-transform: translateZ(-100px) scale(2);
}

/*---Text---*/
.panel.two{
  z-index: 102;
  top: 25vh;
  transform: translateZ(-200px) scale(3) 
  -webkit-transform: translateZ(-200px) scale(3);
}

/*---image---*/
.panel.three{
  z-index: 101;
  margin-top: 180vh;
  transform: translateZ(-50px) scale(2);
  -webkit-transform: translateZ(-50px) scale(2);
}

/*---Blank div can hold text---*/
.panel.four{
  z-index: 103;
  margin-top: 1500px;
  font-size: 1em;
  height: 100vh;
  transform: translateZ(-40px) scale(1);
  -webkit-transform: translateZ(-40px) scale(1);
}

/*---image---*/
.panel.five{
  z-index: 104;
  margin-top: 290vh;
  transform: translateZ(-30px) scale(2);
  -webkit-transform: translateZ(-30px) scale(2);
}


/*---Blank div can hold text---*/
.panel.six{
  z-index: 105;
  margin-top: 295vh;
  transform: translateZ(-5px) scale(3);
  -webkit-transform: translateZ(-5px) scale(3);
}

/*---image---*/
.panel.seven{
  z-index: 106;
  margin-top: 390vh;
  height: 100vh;
}