/*
 * Static base styles
 */

 .doc-scroller-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    -webkit-transform: translate3d(0,0,0);
    z-index: 1;
    /* background-color: lightblue; */
  }
  
  .doc-scroller-rail {
    /* background-color: #FFC0CB60; */
    position: relative;
    padding-bottom: 60vh;
    -webkit-transform: translate3d(0,0,0);
    z-index: 1000;
  }
  
  image-scroller .step {
    display: grid;
    position: relative;
    align-items: center;
    min-height: 150vh;
  }
  
  image-scroller .step p {
    /* background-color: white; */
    padding: 15px;
    font-size: 22px;
      line-height: 1.4;
      /* color: white; */
      color: var(--step-p-color);
  }
  
  .highlighter1 {
    /* border-bottom: 2px solid #798CC7; */
    border-bottom: 2px solid var(--highlighter1-color);
    
  }
  
  
  image-scroller .img-step {
    display: block;
    padding: 30px;
    margin: 0 auto;
    max-width: calc(100% - 60px);
    max-height: calc(100vh - 60px);
  }
  
  /*
   * Make the mobile version (could be first instead)
   */
  
  @media(max-width: 990px) {
  
    image-scroller .step {
      align-items: start;
      padding-left: 12%;
          padding-right: 12%;
      min-height: 100vh;
    }
  
    .doc-scroller-rail {
      padding-bottom: 0vh;
    }
  
    image-scroller .step p {
      font-size: 16px;
          line-height: 1.4;
          color: #3B3B3B;
          background: #fff;
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
    }
  
    .highlighter1 {
      /* border-bottom: 2px solid #798CC7; */
      border-bottom: 2px solid var(--highlighter1-color);
    }
  
    image-scroller .img-step.active {
      display: block;
      max-width: 100%;
      z-index: 0;
      /* animation: 0.25s 1 fadein; */
    }
  }
  
  @media(min-width: 991px) {
    image-scroller .step {
      margin-left: 0;
      margin-right: 25%;
    }
  }
  
  
  
  /*
   * Add in the sticky stuff to see what is
   * happening under the hood
   */
  
  image-scroller .img-step {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  /*
   * Add in the display toggle for the images
   * and some animation for fun
   */
  
  @keyframes fadein {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  image-scroller .img-step {
    display: none;
  }
  
  image-scroller .img-step.active {
    display: block;
    max-width: 80%;
    z-index: 0;
    /* animation: 0.25s 1 fadein; */
  }