/*!
 * LAYOUT HELPERS
 * - Flex/grid spacing helpers
 * - Width containment (e.g., .fullWidth, .halfColumn, .rowAlignBottom)
 * - Global spacing/padding/margin utility classes
 */





 /* This block of code's purpose is to make a sticky row just below the header which displays an h1 title at the top of the page and will be visible until the window size is too small and then it disappears.
 */
 
 .site-header {
    z-index: 10000 !important; /* Ensures that header stays above the additional-sticky-header */
  }
  .additional-sticky-header {
     position: fixed;
     /*top: -50px;*/
     padding: 200px 40px 0 40px;
     /*height: 160px;*/
     left: 0;
     width: 100%;
     z-index: 9998 !important;
     background: #fff;
     box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.25);
     padding-top: env(safe-area-inset-top);
   }
  @media (max-width: 999px) {
      .additional-sticky-header {
        display: none !important; /* Hide below 1000px wide */
      }
    }
   
   h1.hasGallery {
    font-size: 11px !important;
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Source Sans Pro", sans-serif !important;
    }
  
  
  
  
  .dropCap p:first-of-type::first-letter {
    font-size: 4em;
    font-weight: 600;
    float: left;
    initial-letter: 3 3; /* takes up 3 lines vertically and spans 3 lines horizontally */
    margin: 0.1em 0.2em 0 0;
    font-family: Georgia, serif;
    padding: 0;
  }
  
  .dropCap p:first-of-type {
    text-indent: 0 !important;
    overflow: hidden;
  }
  
  .storyImageCenter img {
    max-width: 80%;
  }
  
  .storyImageRight,
  .storyImageLeft {
    max-width: 60%;
  }
  
  .storyImageCenter {
    text-align: center;
  }
  
  .storyImageRight {
    float: right;
    margin: 10px 0px 30px 50px;
  }
  
  .storyImageLeft {
    float: left;
    margin: 10px 50px 30px 0px;
  }
  
  /* Fix figure layout inside float */
  .storyImageRight figure,
  .storyImageLeft figure,
  .storyImageCenter figure {
    display: inline-block;
    margin: 0;
  }
  
  @media (max-width: 768px) {
    .storyImageRight,
    .storyImageLeft,
    .storyImageCenter {
      float: none;
      display: block;
      margin: 30px auto;
      max-width: 100%;
    }
  
    .storyImageRight figure,
    .storyImageLeft figure,
    .storyImageCenter figure {
      display: block;
      text-align: center;
    }
  }