.ocultar{
        display: none;
      }

      .posicion{
        position: absolute;
        height: 3px;
        width: 300px;
        top: 1px;
        background-color: palevioletred;
        z-index: 99;
        text-align: right;
      }

      
      .parallax {

        scroll-snap-type: mandatory;
        scroll-snap-points-y: repeat(50%);
        scroll-snap-type: y mandatory;

        
        height: 500px;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
        -webkit-perspective: 300px;
        perspective: 300px;
      }

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

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

      .parallax__layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

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

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

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


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


      /* Debugger styles - used to show the effect
      --------------------------------------------- */

      .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;
      }


      /* demo styles
      --------------------------------------------- */

      
      .parallax {
        /* font-size: 200%; */
        font-size: 100%;
      }

       /* 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%);
      }



      /* style the groups
      --------------------------------------------- */

      #group1 {
        z-index: 5; 
        scroll-snap-align: start;
      }
      #group1 .parallax__layer--base {
        background:#f2f2f2;
      }

      #group2 {
        z-index: 1; /* slide under groups 1 and 3 */
        scroll-snap-align: start;
      }
      #group2 .parallax__layer--back {
        background: rgb(123,210,200);
      }

      #group3 {
        z-index: 4; /* slide over group 2 and 4 */
        scroll-snap-align: start;
      }
      #group3 .parallax__layer--base {
        z-index: 4
      }

      #group4 {
        z-index: 2; /* slide under group 3 and 5 */
      }
      #group4 .parallax__layer--deep {
        background: #0063ff;
      }

      #group5 {
        z-index: 3; /* slide over group 4 and 6 */
        scroll-snap-align: start;
      }
      #group5 .parallax__layer--base {
        background: #0063ff;
      }

      #group6 {
        z-index: 2; /* slide under group 5 and 7 */
        scroll-snap-align: start;
      }
      #group6 .parallax__layer--back {
        background: #f6f9fd;
      }

      #group7 {
        z-index: 3; /* slide over group 7 */
        scroll-snap-align: start;
      }
      #group7 .parallax__layer--base {
        background: #14d49a;
      }

      #group8 {
        scroll-snap-align: start;
        z-index: 5; /* slide over group 2 */
      }
      #group8 .parallax__layer--base {
        background:#f6f9fd;
      }





      #group9 {
        scroll-snap-align: start;
        z-index: 1; /* slide under groups 1 and 3 */
      }
      #group9 .parallax__layer--back {
        background: rgb(123,210,200);
      }

      #group10 {
        scroll-snap-align: start;
        z-index: 4; /* slide over group 2 and 4 */
        background: #ffff00;
      }
      #group10 .parallax__layer--fore {
        z-index: 4;
      }

      #group11 {
        z-index: 2; /* slide under group 3 and 5 */
      }
      #group11 .parallax__layer--deep {
        background: #0063ff;
      }

      #group12 {
        scroll-snap-align: start;
        z-index: 3; /* slide over group 4 and 6 */
      }
      #group12 .parallax__layer--base {
        background: #f2f2f2;
      }

      #group13 {
        scroll-snap-align: start;
        z-index: 2; /* slide under group 5 and 7 */
      }
      #group13 .parallax__layer--back {
        background: #f6f9fd;
      }

      #group14 {
        scroll-snap-align: start;
        z-index: 3; /* slide over group 7 */
      }
      #group14 .parallax__layer--base {
        background: #f6f9fd;
      }










      .bgAmarillo{
        background-color: yellow;
      }
      .bgVerde{
        background-color: green;
      }

      /* misc
      --------------------------------------------- */
      .demo__info {
        position: absolute;
        z-index:100;
        bottom: 1vh;
        top: auto;
        font-size:80%;
        text-align:center;
        width: 100%;
      }