/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
#hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 200px;
  padding-bottom: 40px;
  min-height: 100vh;
  color: #ffffff; }
  @media screen and (min-width: 641px) {
    #hero {
      padding-bottom: 40px;
      padding-top: 225px; } }
  @media screen and (min-width: 769px) {
    #hero {
      padding-top: 250px; } }
  @media screen and (min-width: 1025px) {
    #hero {
      padding-top: 275px; } }
  #hero .banner-content {
    margin-bottom: 4rem; }
    #hero .banner-content h1 {
      text-transform: uppercase;
      line-height: 0.8;
      letter-spacing: clamp(0.1725rem, calc(2.76px + (4.92 - 2.76) * ((100vw - 320px) / (1920 - 320))), 0.3075rem); }

/* Include bootstrap form styles for tabs and accordians*/
.primary-content h2,
.primary-content h3,
.primary-content h4,
.primary-content h5,
.primary-content h6,
.primary-content .h2,
.primary-content .h3,
.primary-content .h4,
.primary-content .h5,
.primary-content .h6 {
  color: #212322; }