/* @General Text Elements
===================================== */

body {
	font-family: 'Inter', sans-serif;
	font-size: 100%;
	font-weight:400;
	line-height:1.55em;
	color: var(--alt-gray);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

p {
	font-family: 'Inter', sans-serif;
	font-weight:400;
	line-height: 1.45em;
	margin-bottom: 1.25em;
    font-size: clamp(0.95rem, 1vw, 1.125rem);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

p.lead-copy,
.lead-copy p{
    font-size: clamp( 1.25rem, 1.525vw, 1.525rem);
}

p + p {
	margin-top:1.2em;
}

div, dl, dt, dd, ul, ol, li,
pre, form, p, th, td {
	margin: 0;
	padding: 0;
	direction: ltr;
}


strong, b { font-weight: 700; }
em, i { font-style: italic; }


/* @Global Links
===================================== */
a, a:link, a:visited {
    color: var(--violet);
    text-decoration: none;
    
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

a:hover, a:active {
    color:  var(--hover);
    text-decoration: none;
}

/* @end General Text Elements
===================================== */
h1, h2, h3, h4{
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-weight:600;
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: 1.3em;
	padding: 0;
	direction: ltr;
}


/* @Headings (H1)
===================================== */
h1, h1 a, h1 a:visited, 
h1 a:link {
	font-size: clamp(1.65rem, 2.35vw, 2.45rem);
	color: var(--white);
	line-height:1.25em;
	font-weight:600;
	margin-bottom:0.75em;
}

h1 a:hover, h1 a:active{
  color: var(--hover);
}

h1.main {
	font-size: clamp(2.25em, 4vw, 4rem);
	margin-bottom:0.75em;
}

/* @end Headings (H1)
===================================== */


/* @Headings (H2)
===================================== */
h2 {
	font-size: clamp(2.55rem, 4vw, 4rem);
	margin-bottom:0.75em;
}

h2,
h2 a,
h2 a:visited, 
h2 a:link {
	color: var(--white);
}

h2 a:hover, h2 a:active{
  color: var(--hover);
}

h2.subtitle{
    font-size: clamp(2.125rem, 2.35vw, 2.45rem);
}

.top-hat h2 {
	font-size: clamp(1.5rem, 1.75vw, 1.75rem);
	line-height:1em;
    font-weight: 500;
	margin-bottom:0.15em;
    color: var(--violet);
}

#mobileNav h2 {
    font-size: clamp(1.25rem, 1.75vw, 1.85rem);
	line-height:1em;
    font-weight: 500;
	margin-bottom:0.15em;
    color: var(--violet);
}

/* @end Headings (H2)
===================================== */


/* @Headings (H3)
===================================== */
h3 {
    font-size: clamp(1.45rem, 1.45vw, 1.55rem);
    margin-bottom:0.75em;
}

h3,
h3 a, 
h3 a:visited, 
h3 a:link {
	color:var(--white);
}

h3 a:hover, h3 a:active{
  color: var(--hover);
}

.case-studies-wrapper h3{
    margin-bottom: 1.55em;
}

#testmonialSlider h3{
    font-size: clamp(1.25rem, 1.35vw, 1.45rem);
    margin-bottom: 0.25em;
}
/* @end Headings (H3)
===================================== */

/* @Headings (H4)
===================================== */
h4 {
	font-size: clamp(0.75rem, 0.85vw, 0.85rem);
	margin-bottom: 1.55em;
    text-transform: uppercase;
}

#testmonialSlider h4{
    margin-bottom: 0.125em;
}

h4,
h4 a, 
h4 a:visited, 
h4 a:link {
	color:var(--light-gray);
}

h4 a:hover, h4 a:active{
  color: var(--hover);
}

.case-studies h4{
    margin-top: 2em;
}

#mobileNav h4,
.top-hat h4{
    margin-bottom: 0;
}
/* @end Headings (H4)
===================================== */

#testmonialSlider h5{
    font-size: 0.75rem;
    text-transform: none;
    color:var(--light-gray);
}


@media only screen and (max-width: 720px) {
/*
    h1.main{
       font-size: 2.25em; 
    }
    

    h1,
    h2.subtitle{
        font-size: 1.75em;
    }
    
    h2 {
        font-size: min(8vw, 65px);
    }
    

    p.lead-copy,
    .lead-copy p {
        font-size: 1.25em;
    }
*/
}