.mx-lg-custom {
  margin-left: 22rem; /* 352px */
  margin-right: 22rem;
}

  /* Specific overrides for the dropdown component */
  /*--bs-dropdown-bg: #e69138; ffffff; #4a2c6d; */
  /*--bs-dropdown-link-hover-bg: #917b70; hover background color */

/*
   Mobile-First Approach Base Styles:
   ---------------------------------

   Wide Screens              @media (min-width: 1600px)
   Wide Screens              @media (min-width: 1400px)
   Monitors / Desktops       @media (min-width: 1200px)
   Laptops / Small desktops  @media (min-width: 992px)
   Tablets                   @media (min-width: 768px)
   Larger / Landscape phones @media (min-width: 576px)
   Large portrait mobile     @media (min-width: 440px)
   Medium portrait mobile    @media (min-width: 390px)
   Small portrait mobile     @media (min-width: 360px)
   Smaller mobile devices    @media (min-width: 320px) <-- Make this the default styling if broken on iPhone SE
   Smartwatches              (No media query)
*/

/*  */
@media screen and (min-width: 576px) {
  .card-img-overlay {
    h1 {
      font-size: 48px !important;
    }
    h3 {
      font-size: 26px !important;
    }
  }

  .signature {
    .title-text {
      display: inline-block !important;
      margin-bottom: 0px !important;
      padding-bottom: 0px !important;
      font-size: 20px !important;
    }
    .mailto-address {
      font-size: 20px !important;
    }
    .copyright {
      font-size: 17px !important;
    }
  }

  .heading h2 {
    font-size: 2.0rem !important;
  }

  .wrapper-index {
    margin-left: 0px !important; /* Fixes right side overflow */
    margin-right: 10px !important;
    overflow-x: hidden !important; /* Hides content extending beyond edges of element's container */
  
    h2 {
      margin-left: 16px !important;
      font-size: 28px !important;
    }
    h4 {
      margin-left: -4px !important;
      font-size: 24px !important;
    }
    ul {
      margin-left: 16px !important;
      margin-right: 16px !important;
      font-size: 20px !important;
    }
    .mx-lg-custom {
      margin-left: 20px !important;
      margin-right: 20px !important;
    }
    .contactme {
      margin-left: 20px !important;
      margin-right: 8px !important;
      font-size: 20px !important;
    }
  }

  .wrapper-approach {
    top-margin: 0px !important;
    font-size: 21px !important;
    /*margin-left: calc(20vw - 100px) !important;
    margin-right: calc(20vw - 100px) !important;*/
    padding-left: calc(20vw - 100px) !important;
    padding-right: calc(20vw - 100px) !important;
	/*.container-lg has a 12px gutter*/
	/*background-color: grey !important;*/
    .container-lg {
      font-size: 20px !important;
    }
    ul {
      padding-left: 40px !important;
    }
  }

  .background {
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 20px !important;
  }
  
  .credentials {
    max-width: 100% !important;
    height: auto !important;
    h2 {
      font-size: 33px !important;
    }
    h5 {
      font-size: 22px !important;
    }
  }

  .wrapper-faq {
    /*padding-left: 2.0rem !important;
    padding-right: 2.0rem !important;*/
    padding-left: calc(8.3vw - 16px) !important;
    padding-right: calc(8.3vw - 16px) !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
} /* End min-width: 576 */

/* iPad Mini (768) */
@media screen and (min-width: 768px) {
  .heading h2 {
    font-size: 40px !important;
  }

  .wrapper-approach {
    font-size: 21px !important;
    /*margin-left: calc(20vw - 100px) !important;
    margin-right: calc(20vw - 100px) !important;*/
    padding-left: calc(30vw - 177px) !important;
    padding-right: calc(30vw - 177px) !important;
	/*.container-lg has a 12px gutter*/
	/*background-color: lightblue !important;*/
    ul {
      padding-left: 40px !important;
    }
  }

  .wrapper-background {
    /*margin-left: 0px !important; Fixes right side overflow */
    /*overflow-x: hidden !important; Hides content extending beyond container's edges */
  }

  .wrapper-faq {
    /*padding-left: 3.0rem !important;
    padding-right: 3.0rem !important;*/
    padding-left: calc(15vw - 67px) !important;
    padding-right: calc(15vw - 67px) !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    .accordion-button {
      font-size: 22px !important;
    }
    .accordion-body {
      font-size: 20px !important;
    }
  }
} /* End min-width: 768 */

/* iPad Air (820), Asus Zenbook Fold (853), Surface Pro 7 (912) */
@media screen and (min-width: 820px) {
  .card-img-overlay {
    h1 {
      font-size: 48px !important;
    }
    h3 {
      font-size: 26px !important;
    }
  }

  .signature {
	.copyright {
      font-size: 18px !important;
    }
  }

  .divider {
    margin: 20px 30px !important;
  }

  .heading h2 {
    font-size: 44px !important;
  }

  .image-scale {
    width: 100%;
	max-width: 500px;
    height: auto;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  /* .wrapper-index stylings inherited */
 
  .wrapper-approach {
    .container-lg {
      font-size: 22px !important;
    }
  }

  .background {
    padding-left: 28px !important;
    padding-right: 28px !important;
    font-size: 22px !important;
	ul {
      padding-left: 40px !important;
      font-size: 22px !important;
    }
  }

  .credentials {
    /*display: block; Stretches to 100% of its parent container. inline-block Only as wide as its inner content.*/
    max-width: 100% !important;
    height: auto !important;
    h2 {
      font-size: 36px !important;
    }
    h5 {
      font-size: 24px !important;
    }
  }

  .wrapper-faq {
    /*padding-left: 4.0rem !important;
    padding-right: 4.0rem !important;
	padding-left: calc(15vw) !important;
	padding-right: calc(15vw) !important;*/
    margin-left: 0px !important;
    margin-right: 0px !important;
    .accordion-button {
      font-size: 23px !important;
    }
    .accordion-body {
      font-size: 21px !important;
    }
  }
} /* End min-width: 820 */

@media screen and (min-width: 992px) {
  /* Prevent the navbar container from trapping the absolute elements layout
  .navbar-collapse {
    position: relative;
  }*/
  
  /* Force the menu to overlay like it does on desktop */ /* inherited TODO - remove */
  /*.navbar-nav .dropdown-menu {
    position: absolute !important;
    float: none;
    background-color: #e69138; Ensures underlying content doesn't bleed through/
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1); Adds separation depth
    width: 100%; Optional: ensures it spans wide enough on small screens
  }*/

  .card-img-overlay {
    h1 {
      font-size: 54px !important;
    }
    h3 {
      font-size: 28px !important;
    }
  }

  .signature p { /* TODO */
    font-size: 22px !important; /* Note: Default in html code */
  }

  .divider {
    margin: 20px 20px !important;
  }

  .heading h2 {
    font-size: 48px !important; /* Note: Default in html code */
  }

  .wrapper-index {
    /*margin-left: 0px !important; Fixes right side overflow
    margin-right: 0px !important;
    overflow-x: hidden !important; Hides content extending beyond container's edges */
	padding-left: 20px !important;  /* Adds padding at lg breakpoint to put spacing */
	padding-right: 20px !important; /* between image and left edge of viewport. */
  
    h2 {
      margin-left: 10px !important;
      font-size: 32px !important;
    }
    h4 {
      margin-left: 0px !important;
      font-size: 30px !important;
    }
    ul {
      margin-left: 18px !important;
      margin-right: 18px !important; /* Keeps items from extending close to screen's right edge */ 
      font-size: 21px !important; /* Note: Default in html code */
    }
    .second-indent {
      padding-left: 8px !important; 
	}
	/* Possible adjustments to lists:
    ul {
     list-style: none; Removes standard bullets
     padding-left: 0;  Flushes list to the edge
    }
    li {
      padding-left: 20px; Pushes text to the right
      text-indent: 20px;  Pulls only the first line/bullet back left
    }
    */
    .mx-lg-custom { /* Needed to align the second container with the first */
      /*background-color: silver !important;
      margin-left: 20px !important;
      margin-right: 20px !important;*/
      margin-left: calc(20vw - 180px) !important;
      margin-right: calc(20vw - 180px) !important;
    }
    .custom-indent { /* Adapts indentation for quoted statements */
      /*padding-left: -4px !important;*/
      margin-left: -30px !important;
      margin-right: 0px !important;
    }
    .custom-indent {
      padding-left: 40px !important;
    }
    .contactme {
      margin-left: 20px !important;
      margin-right: 8px !important;
      font-size: 22px !important; /* Note: Default in html code */
    }
    .tmmgoal { /* Override the h2 styling for this subelement (or use h3) */
      h2 {
        margin-left: 0px !important;
      }
    }
  } /* End wrapper-index stylings */

  .wrapper-background {
	padding-left: 20px !important;  /* Adds padding at lg breakpoint for spacing */
	padding-right: 20px !important; /* between image and left edge of viewport. */
  }

  .background {
    padding-left: 36px !important;
    padding-right: 36px !important;
    font-size: 22px !important;
  }
  
  .wrapper-faq {
    /*padding-left: 10.0rem !important;
    padding-right: 10.0rem !important;*/
    margin-left: 0px !important;
    margin-right: 0px !important;
} /* End min-width: 992 */

@media screen and (min-width: 1200px) {
  .card-img-overlay {
    h1 {
      font-size: 60px !important;
    }
    h3 {
      font-size: 30px !important;
    }
  }
  
  .image-scale {
    width: 100%;
    height: auto;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .wrapper-index {
    /*background-color: lightgreen !important;*/
    .mx-lg-custom {
      margin-left: calc(30vw - 300px) !important;
      margin-right: calc(30vw - 300px) !important;*/
    }
  }

  .custom-gutter {
    --bs-gutter-x: 0px !important; 
  }

  .wrapper-faq {
    /*padding-left: 12.0rem !important;
    padding-right: 12.0rem !important;*/
	/* Width of FAQ accordion stays fixed after width 1200. */
    padding-left: calc(50vw - 487px) !important;
    padding-right: calc(50vw - 487px) !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
} /* End min-width: 1200 */

@media screen and (min-width: 1400px) {
  .card-img-overlay {
    h3 {
      font-size: 30px !important;
    }
  }

  .divider {
    margin: 30px 30px !important;
  }

  .wrapper-index {
	/*.mx-lg-custom {
	  margin-left: 90px !important;
      margin-right: 90px !important;
	}*/
  }

  .wrapper-faq {
    /*padding-left: 7.0rem !important;
    padding-right: 7.0rem !important;*/
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
} /* End min-width: 1400 */

@media screen and (min-width: 1600px) {
  .card-img-overlay {
	h1 {
      /*background-color: tan !important;*/
	}
  }
  
  .divider {
    margin: 20px 30px !important;
  }

  .wrapper-index {
    /*background-color: grey !important;*/
    /*background-color: lightgreen !important;*/
    .mx-lg-custom {
      margin-left: 224px;
      margin-right: 224px;
    }
  }

  .wrapper-faq {
    /*padding-left: 16.0rem !important;
    padding-right: 16.0rem !important;*/
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
} /* End min-width: 1600 */

/*@media (max-width: 684px) {
  .heading h2 {
    font-size: 42px !important;
  }
}*/

/*@media (max-width: 600px) {
  .heading h2 {
    font-size: 40px !important;
  }

   Not sure if this is needed 
  .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}*/