html,
      body,
      header,
      .jarallax {
        height: 700px;
      }

      @media (max-width: 740px) {
        html,
        body,
        header,
        .jarallax {
          height: 100vh;
        }
      }

      @media (min-width: 800px) and (max-width: 850px) {
        html,
        body,
        header,
        .jarallax {
          height: 100vh;
        }
      }

      @media (min-width: 560px) and (max-width: 650px) {
        header .jarallax h1 {
          margin-bottom: .5rem !important;
        }
        header .jarallax h5 {
          margin-bottom: .5rem !important;
        }
      }

      @media (min-width: 660px) and (max-width: 700px) {
        header .jarallax h1 {
          margin-bottom: 1.5rem !important;
        }
        header .jarallax h5 {
          margin-bottom: 1.5rem !important;
        }
      }

      .top-nav-collapse {
        background-color: transparent !important;
      }

      .navbar:not(.top-nav-collapse) {
        background: transparent !important;
      }

      @media (max-width: 768px) {
        .navbar:not(.top-nav-collapse) {
          background: transparent !important;
        }
      }
      @media (min-width: 800px) and (max-width: 850px) {
          .navbar:not(.top-nav-collapse) {
              background: transparent!important;
          }
      }

      @media (max-width: 450px) {
        .display-3 {
          font-size: 3rem;
        }
      }

      .navbar .nav-link {
          color: #fff !important;
      }
      

      /* custom builds */

      .bg-image {
        min-width: 100%; 
        z-index: -1; 
        min-height: 100%;

      }

      .side-nav.wide.slim {
        width: 3.75rem !important;
      }