/*GENREIC*/



* {
    margin:0;
    padding:0;
  }


.parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
  }

  .parallax__group {
      position: relative;
      height: 500px; /* fallback for older browsers */
      height: 100vh;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

.parallax-layer {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
  }


/*LAYERS*/

.parallax-front {
    -webkit-transform: translateZ(130px) scale(.55);
    transform: translateZ(130px) scale(.55);
    z-index: 5;
  }

.parallax-fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 4;
  }

.parallax-base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 3;
  }

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

.parallax-deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 1;
  }

  .parallax-abyss {
      -webkit-transform: translateZ(-900px) scale(4);
      transform: translateZ(-900px) scale(4);
      z-index: -1;
    }