.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}


/********************************/
/*  .header-padding-middle        */
/********************************/

/* APPLICATION:  This gets applied to title-menu-div padding-left */

.header-padding-middle { /* this is the default settings for the html.P block that holds the title banner */
  padding-right: 40px;
}

@media screen and (max-width: 857px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .header-padding-middle {
    padding-right: 0px;
  }
}

@media screen and (857px <= width <= 1275px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .header-padding-middle {
    padding-right: 20px;
  }
}

/********************************/
/*  .title-font-size-control    */
/********************************/

.title-font-size-control {
  font-size: calc(1.475rem + 2.0vw);
  /* font-size: calc(1.475rem + 2.7vw); updated to accomodate name change from PETRINEX to BUSINESS INTELLIGENCE*/
  font-weight: 300;
  line-height: 1.2;
}

@media screen and (width > 1275px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .title-font-size-control {
    font-size: 55px;
  }
}

/********************************/
/*  .wrap-control    */
/********************************/

.wrap-control { /* this is the default settings */
  flex-wrap: nowrap !important;
}

@media screen and (max-width: 857px) { /* this is the dynamic settings  */
  .wrap-control {
    flex-wrap: wrap !important;
  }
}

@media screen and (857px <= width <= 1050px) { /* this is the dynamic settings was 1200*/
  .wwrap-control {
    flex-wrap: wrap !important;
  }
}

/********************************/
/*  .title-banner-margin       */
/********************************/

.title-banner-margin { /* this is the default settings for the html.P block that holds the title banner */
  padding: 22px 0px 0px 0px;
  margin: 0px;
}

@media screen and (max-width: 857px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .title-banner-margin {
    padding: 0px;
    margin: 0px;
  }
}

@media screen and (857px <= width <= 1275px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .title-banner-margin {
    padding: 22px 0px 0px 0px;
    margin: 0px;
  }
}

/********************************/
/*  .header-width-control       */
/********************************/

/* APPLICATION: This originates on the main home page and controls usable space for sub-page div */
/* NOTE: Percentages for margins seem to work really well to control things proportionally */

.header-width-control { /* this is the default settings for the html.P block that holds the title banner */
  padding: 0px 20%;
  scrollbar-gutter: stable;
}

@media screen and (max-width: 857px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .header-width-control {
    padding: 0px 10px;  
    scrollbar-gutter: auto;
  }
}

@media screen and (857px <= width <= 1200px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .header-width-control {
    padding: 0px 10%; 
    scrollbar-gutter: stable;
  }
}

@media screen and (1201px <= width <= 1700px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .header-width-control {
    padding: 0px 15%;
    scrollbar-gutter: stable;
  
  }
}

/********************************/
/*  .content-width-control       */
/********************************/

/* APPLICATION: This originates on the main home page and controls usable space for sub-page div */
/* NOTE: Percentages for margins seem to work really well to control things proportionally */

.content-width-control { /* this is the default settings for the html.P block that holds the title banner */
  padding: 20px 20%;
  scrollbar-gutter: stable;
}

@media screen and (max-width: 857px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .content-width-control {
    padding: 20px 10px;  
    scrollbar-gutter: auto;
  }
}

@media screen and (857px <= width <= 1200px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .content-width-control {
    padding: 20px 10%; 
    scrollbar-gutter: stable;
  }
}

@media screen and (1201px <= width <= 1700px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .content-width-control {
    padding: 20px 15%;
    scrollbar-gutter: stable;
  
  }
}