.parallax {
  height: 500px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.parallax-group {
  position: relative;
  height: 500px;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scroll-level-fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.scroll-level-base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.scroll-level-back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

.scroll-level-deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}

.debug {
  position: fixed;
  top: 0;
  left: .5em;
  z-index: 999;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: .5em;
  border-radius: 0 0 5px 5px;
}

.debug-on .parallax-group {
  -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
  transform: translate3d(700px, 0, -800px) rotateY(30deg);
}

.debug-on .parallax-layer {
  box-shadow: 0 0 0 2px #000;
  opacity: 0.9;
}

.parallax-group {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

* {
  margin: 0;
  padding: 0;
}

.parallax {
  font-size: 200%;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#group1 {
  z-index: 5;
}

#group1 .scroll-level-base {
  background: rgb(102,204,102);
}

#group2 {
  z-index: 3;
}

#group2 .scroll-level-back {
  background: rgb(123,210,102);
}

#group3 {
  z-index: 4;
}

#group3 .scroll-level-base {
  background: rgb(153,216,101);
}

#group4 {
  z-index: 2;
}

#group4 .scroll-level-deep {
  background: rgb(184,223,101);
}

#group5 {
  z-index: 3;
}

#group5 .scroll-level-base {
  background: rgb(214,229,100);
}

#group6 {
  z-index: 2;
}

#group6 .scroll-level-back {
  background: rgb(245,235,100);
}

#group7 {
  z-index: 3;
}

#group7 .scroll-level-base {
  background: rgb(255,241,100);
}