/* Parallax base styles
      --------------------------------------------- */
      body {
        margin:0px;
        font: 100% / 1.5 Arial;
      }

      .parallax {
        height: 100vh;
        overflow-x: hidden;
        perspective: 300px;
      }
    
      .p-group {
        position: relative;
        height: 100vh;
        transform-style: preserve-3d;
      }

      
    
      .p-layer {
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
      }

      .responsive{
        height: auto;
        position: relative;
        z-index: 100;
      }

      .responsive.z-index-101{
        z-index: 101;
      }
      .responsive.z-index-102{
        z-index: 102;
      }
      .responsive.z-index-103{
        z-index: 103;
      }
      .responsive.z-index-104{
        z-index: 104;
      }
      .responsive.z-index-105{
        z-index: 105;
      }


      .p-base {
        transform: translateZ(0);
        z-index: 15;
      }

      .p-back-base{
        transform: translateZ(-150px) scale(1.5);
        z-index: 10;
      }
    
      .p-back {
        transform: translateZ(-300px) scale(2);
        z-index: -9;
      }

      .p-deep-back {
        transform: translateZ(-450px) scale(2.5);
        z-index: 10;
      }
    
      .p-deep {
        transform: translateZ(-600px) scale(3);
        z-index: 5;
      }
  
    
       /* centre the content in the parallax layers */
      .title {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }


      .red {
        background-color: rgb(255, 0, 0,.5)
      }


      .debug {
        display: inline;
        z-index: 1001;
        background: transparent;
        color: white;
        border-radius: 5px;
        border:1px solid white;
        cursor: pointer;
        padding:2px;
      }
      .debug-on .p-group {
        -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
        transform: translate3d(700px, 0, -800px) rotateY(30deg);
     }
      .debug-on .p-layer {
        box-shadow: 0 0 0 2px #000;
        opacity: 0.9;
      }
      .p-group {
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
      }

      .debug-off-btn{
        position: fixed;
        top: 0;
        left: .5em;
        display: none;
        background-color: red;
      }

      .debug-on .debug-off-btn{
        display: block;
      }