@charset "utf-8";
/* CSS Document */

/* ------------------- defaults ------------------- */
:root {
  --tsy-navy: #2c384a;
  --tsy-green: #4d7861;
  --tsy-mid-blue: #5d779d;
  --tsy-lime: #b1f0cf;
  --tsy-light-blue: #90b6f0;
  --tsy-orange: #f0ae81;
  
  --tsy-mid-blue-dark-tint: #d3dcea;
  --tsy-mid-blue-light-tint: #e8effa;
  --tsy-lime-tint: #e8fbf1;
  --tsy-light-blue-tint: #e0eaff;
  --tsy-lighter-blue-tint: #f4f7fd;
  --tsy-orange-tint: #fcefe6;
  
  --ui-almost-black: #333;
  --ui-dark-grey: #666;
  --ui-grey: #c4c4c4;
  --ui-light-grey: #eee;
  --ui-lightest-grey: #f7f8fa;

  --vertical-spacing: 2.25rem;
  --grid-gap: 20px;
  --item-padding: var(--vertical-spacing);
  --item-border-radius: 0;
  
  --fa-style-family: "Font Awesome 6 Pro";
  /*--fa-style-family: "Font Awesome 6 Sharp";
  /*--fa-style: 900; /* solid */
  --fa-style: 400; /* regular */
  /*--fa-style: 300; /* light */
  /*--fa-style: 900; /* thin */
    
  accent-color: var(--tsy-mid-blue); /* applies to some browser input and progress elements */
}

/* offset scroll for fragment links */
html {
    scroll-padding-top: 120px;
}

/* give fluid layout proportional space at sides */
@media (min-width: 575px) and (max-width: 1399.98px) {
  .container-xxl {   
      margin-left: 8vw;
      margin-right: 8vw;
      width: unset !important;
  }
}

@media (min-width: 574.98px) and (max-width: 767.98px) {
    #banner-toggle .nav-link:hover:before, #banner-toggle .nav-link.disabled:before {
        /*left: calc(8vw - 8px);*/
    }
}

/* --- responsive font sizes --- */
h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2 {
    font-size: 2rem;
  }
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3 {
    font-size: 1.75rem;
  }
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4 {
    font-size: 1.5rem;
  }
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}
