@import url('/fonts/montserrat/montserrat.css');
/*@import url('/fonts/caslon/caslon.css');*/

:root {
/* Background Colors */
--background-default-light: white;
--background-default-dark: #1b1b1b;
--background-color-1: #f9f9f9;
--background-color-2: #e6e6e6;
--background-color-3: #f1f9ff;
--background-color-4: #f3f3f3;
--background-color-5: #6c757d;
--background-color-7: #ededed;
--background-color-8: #343a40;

--background-color-1-dark: #919191;
--background-color-2-dark: #454545;
--background-color-3-dark: #f1f9ff;
--background-color-4-dark: #757575;
--background-color-5-dark: #6c757d;
--background-color-7-dark: #ededed;
--background-color-8-dark: #343a40;

/* Brand Colors */
--color-main: rgb(223, 75, 37);
--color-secondary: ;
--color-accent-1: ;
--color-accent-2: lightgrey;
--color-accent-3: ;
--color-actions-1: #3090C7;
--color-text-dark: #f8f9fa;
--color-text-light: black;
--color-danger: #dc3545;
/* Brand Fonts */
  font-family: 'montserrat', 'sans-serif';
  --font-main:  'montserrat';
  --font-secondary:  'caslon';
  --font-fallback: 'sans-serif';
/* Safari fluid Typography fix */
  min-height: 0vw;
}

/*** Media Break Points & Fluid Responsiveness ***/
/* https://websemantics.uk/tools/responsive-font-calculator/ */

/* up to 360 */
@media only screen 
    and (max-width:360px) {
        :root {
            font-size: 14px;
        }
}
/* ->576px */
@media only screen and (min-width:361px) and (max-width:576px) {
    :root {
        font-size: clamp(14px, calc(0.875rem + 
            ((1vw - 3.61px) * 0.9302)), 16px);
    }
}
/* ->768px */
@media only screen 
    and (min-width:577px)
    and (max-width:768px) {
        :root {
            font-size: 16px;
        }
}
/* ->992px */
@media only screen 
    and (min-width:769px)
    and (max-width:992px) {
        :root {
            font-size: clamp(16px, calc(1rem +
                ((1vw - 7.68px) * 0.8929)), 18px);
        }
}
/* ->1200px */
@media only screen 
    and (min-width:993px)
    and (max-width:1200px) {
        :root {
            font-size: 18px;
        }
}
/* ->1400px */
@media only screen 
    and (min-width:1201px)
    and (max-width:1400px) {
        :root {
            font-size: clamp(18px, calc(1.125rem +
                ((1vw - 12.01px) * 1.005)), 20px);
        }
}
/* above 1400px */
@media only screen 
    and (min-width:1401px) {
        :root {
            font-size: 20px;
        }
}