html {
    --navbar-height: 5rem;
    --navbar-sm-height: 3.75rem;
  }

  /**
   See @page-script.js
  */
  #scroll-down {
    position: absolute;
    top: 60vh;
  }

  #scroll-up {
    position: absolute;
    top: 0;
  }


  /* when we scroll down a little bit, navbar becomes fixed (+compact) and appears from top */
  @keyframes navbarAppearIn {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: none;
    }
  }


  /* if our ace.css is compiled using sticky: true, then we should make it position: fixed again to fix a few glitches */
  .navbar-fixed {
    position: relative;
    animation: none;
    transition: none;
  }

  .navbar-compact {
    height: 5rem;
  }

  .navbar-fixed .navbar-inner {
    position: fixed;
    top: 0;
  }

  .navbar-compact .navbar-inner {
    height: 5rem;
    animation: navbarAppearIn 300ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar .navbar-inner {
      transition: none !important;
      animation: none !important;
    }
  }



  #navbar-dark.navbar-compact .navbar-inner {
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
  }


  /* the shadow for the 3 feature items ... speed, flexibility, etc */
  .shadow-1 {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
  }


  /* the triangle in light/white version */
  .shape-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 20px 12px;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }

  /* END */

  .start-page-intro {
    background: url('images/header_background.jpg');
    background-repeat:no-repeat;
    background-size:cover;
  }



  .navbar-shadow {
    box-shadow: 0 2px 13px 6px rgb(4 9 42 / 8%);
  }


  .banner-right-img-shadow {
    /*box-shadow: 0px 10px 50px rgb(0 0 0 /20%);*/
    -webkit-filter: drop-shadow(0px 10px 50px rgb(0 0 0 / 20%));
    filter: drop-shadow(0px 10px 50px rgb(0 0 0 / 20%))
  }

  .how-it-works {
    content: url('../images/how_it_works.svg');
  }

  @media screen and (max-width: 1000px) {
    .how-it-works {
      content: url('../images/how_it_works.svg');
      width:65%;
    }
  }

  @media screen and (max-width: 575px) {
    .text-sm-center {
      text-align:center !important;
    }
  }

  @media screen and (max-width: 575px) {
    .text-sm-90 {
      font-size: .85em !important;
    }
  }

  .rt-row{
    display:none;
  }

  @media screen and (max-width: 768px) {
    .lt-row {
      display: none !important;
    }
    .rt-row {
      display: flex;
    }
  }

  /* END */
  .ace-file-container{
    max-width:345px;
  }
 
  .navbar-shadow {
    box-shadow: 0 2px 13px 6px rgb(4 9 42 / 8%);
  }
  @media screen and (min-width: 601px) {
    .card-row {
      margin-left: 15%;
    }
  }

  @media screen and (max-width: 600px) {
    .card-row {
      margin-left: 0px;
    }
  }

  @media screen and (max-width: 992px) {
    .left-img {
      display: none;
    }
  }
#qrcode {
display: inline-grid;
}
#qrcode img {
  height: 100px;
}
  /* END */