@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Monument';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/MonumentGrotesk-Regular.woff2');
        src: url('../fonts/MonumentGrotesk-Regular.eot') format('embedded-opentype'),
         url('../fonts/MonumentGrotesk-Regular.woff') format('woff'),
         ;
    font-display: fallback;
  }
  @font-face {
    font-family: 'Monument Bold';
    font-style: bold;
    font-weight: 400;
    src: url('../fonts/MonumentGrotesk-Bold.woff2');
        src: url('../fonts/MonumentGrotesk-Bold.eot') format('embedded-opentype'),
         url('../fonts/MonumentGrotesk-Bold.woff') format('woff'),
         ;
    font-display: fallback;
  }

 
/*Typography based on perfect fourth 1.333 scale ref: https://type-scale.com */
html, body {
    font-family:'Monument', 'Inter', Arial, sans-serif ;
    font-size: 16px;
    font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
    font-weight: normal;
	font-style: normal;
	line-height: 1.40rem;
	color: #222222;
    text-wrap:balance;
}
h1{
    font-size:3.75rem;
    line-height:1.05em;
    font-weight: 400;
    margin-bottom:3rem;
}
h2.xl{
    font-size:3.75rem;
    line-height:1.05em;
    font-weight: 400;
}
h2{
    font-size:2.625rem;
    line-height:1.20em;
    font-weight: 400;
}
h3{
    font-size:2.375rem;
    line-height:1.15em;
    font-weight: 400;
}
h4{font-size:1.953rem;}
h5{font-size:1.563rem;}
.large{
    font-size:1.375rem;
    font-weight: 400;
    letter-spacing:0.1px;
    line-height:1.30em;
    text-wrap:balance;
}
.med{
    font-size:1.125rem;
    font-weight: 400;
    letter-spacing:0.1%;
    line-height:100%;
    margin-bottom:1.5rem;
    text-wrap:balance;
}
.small{
    font-size:0.8rem;
}
.eyebrow {
    font-family:'Monument Bold', 'Inter', Arial, sans-serif ;
    font-size:1rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing: 4.8px;
}
.focus-areas{
    font-size:1.75rem;
    line-height:1.1em;
}
.dark {
    color: var(--color-sageDark);
}
.white{
    color: var(--color-fog);
}

/*Responsive Font sizes*/
@media screen and (max-width: 600px) {
    h1 {
        font-size:2rem;
    }
    h2 {
        font-size:1.5rem;;
      }
      .large{
        font-size:1rem;
    }
    .med{
        font-size:0.9rem;
    }
    .eyebrow {
    font-size:.75rem;
    }
}