/* Banner Styles Override */

  .mineral-based .background-image,
  .natural-ingredients .background-image,
  .plant-derived-ingredients .background-image {
    background-position: top left;
  }

  .naturally-derived-ingredients .background-image {
    background-position: 220%;
  }


  .vegan .background-image {
    background-position: 33%;
  }
/* Flexy elements */

  .col-flex-50 {
    flex: 1 1 50%;
  }

  .two-col-container {
    flex-flow: row nowrap;
  }

/* Headings */

/*  .page-content-description {
    display: none;
  }*/

/* Glossary index */

  .index > a.disabled {
    color: #949494;
  }

  .index > a, .index > a:hover {
    font-size: 2rem;
  }

  .index a.active {
    color: #3aa2ae;
  }

/* Main Ingredients Page */

  .image > img {
    width: 100%;
    display: block;
    max-width: 100%;
    height: auto;
  }

  .glossary-letter {
    font-size: 2.5rem;
  }

/* Single Ingredient Pages */

  .ingredient-glossary-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .ingredient-glossary-product-picks img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .ingredient-glossary-grid-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

/* Desktop Only Styles */

  @media (min-width: 1200px) {
     .ingredient-main .content-asset-page-header-fullBackgroundImage {
       background-position: top left;
    }

    .naturally-derived-ingredients .content-asset-page-header-fullBackgroundImage {
      background-position: 220%;
    }
  }

/* Mobile Styles */

  @media (max-width: 767.98px) {
    .content-asset-page-header-fullBackgroundImage .background-image {
      background-position: center;
    }

    .ingredient-glossary .two-col-container {
      width: 100%;
    }

    .ingredient-glossary-grid-copy-left {
      order: 2;
    }

    .naturally-derived-ingredients .background-image {
        background-position: top left;
    }

    .vegan .background-image {
        background-position: center;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px), not all {
    .ingredient-glossary .two-col-container {
      width: 50%;
    }
  }


  @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero {
      min-height: 18vh;
    }
  }