body, html {
    overflow: hidden;
}
body {
    font: 100%/1.5 Arial;
}
* {
    margin: 0;
    padding: 0;
}
#group1 {
    z-index: 5;
}

#group1 .parallax__layer--base {
    background: none repeat scroll 0 0 rgb(102, 204, 102);
}
#group2 {
    z-index: 3;
}
#group2 .parallax__layer--back {
    background: none repeat scroll 0 0 rgb(123, 210, 102);
}
#group3 {
    z-index: 4;
}
#group3 .parallax__layer--base {
    background: none repeat scroll 0 0 rgb(153, 216, 101);
}
#group4 {
    z-index: 2;
}
#group4 .parallax__layer--deep {
    background: none repeat scroll 0 0 rgb(184, 223, 101);
}
#group5 {
    z-index: 3;
}
#group5 .parallax__layer--base {
    background: none repeat scroll 0 0 rgb(214, 229, 100);
}
#group6 {
    z-index: 2;
}
#group6 .parallax__layer--back {
    background: none repeat scroll 0 0 rgb(245, 235, 100);
}
#group7 {
    z-index: 3;
}
#group7 .parallax__layer--base {
    background: none repeat scroll 0 0 rgb(255, 241, 100);
}
.title {
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective-origin-x: 100%;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin-x: 100%;
}
.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
  /*transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}

.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}