@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  /* Primary Colours */
  --white: #FFFFFF;
  --black: #000000;
  --red: #DB0023;
  --light-grey: #EEEEEE;
  
  /* Header Fonts */
  --header-font-primary: "Lato", sans-serif;
  --header-font-weight: 700;
  --header-font-weight-lighter: 400;
  --header-letter-spacing: 0;
  --header-line-height: 120%;
  
  /* Body Desktop/Mobile Fonts */
  --body-font-primary: "Lato", sans-serif;
  --body-font-weight: 400;
  --body-font-weight-bold: 700;
  --body-letter-spacing: 0;
  --body-line-height: 130%;
  
  /* Button Fonts */
  --button-font-primary: "Lato", sans-serif;
  --button-font-weight: 500;
  --button-letter-spacing: 0;
  --button-line-height: 142%;
  
  /* Rounded Corners */
  --standard-radius: 50px;
  --standard-radius-small: 25px;
  
}

body {
	color: var(--black);
	background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font-primary);
	letter-spacing: var(--header-letter-spacing);
	line-height: var(--header-line-height);
	font-weight: var(--header-font-weight);
	margin-top: 0px;
	margin-bottom: 0.5em;
	color: var(--black);
	overflow-wrap: break-word;
}

h6 {
	font-weight: var(--header-font-weight-lighter);
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
	color: var(--red);
}

p, ul, ul li, ol, table, label {
	font-family: var(--body-font-primary);
  	letter-spacing: var(--body-letter-spacing);
  	line-height: var(--body-line-height);
  	font-weight: var(--body-font-weight);
  	font-size: 20px;
  	color: var(--black);
  	margin-top: 0px;
}

a.underline {
	color: var(--black);
	text-decoration: underline;
}

a.underline:hover {
	color: var(--red);
}

p b {
	font-weight: var(--body-font-weight-bold);
}

p.counter {
	font-size: 50px;
	margin: 0px;
	color: var(--red);
}

p.upper_p {
	text-transform: uppercase;
}

h1 {
  font-size: 64px;
}

h2 {
  font-size: 54px;
}

h3 {
  font-size: 45px;
}

h4 {
  font-size: 40px;
}

/* Size an h2 like an h3/h4 — keeps a valid heading outline while preserving the design's visual hierarchy */
h2.as_h3 {
  font-size: 45px;
}

h2.as_h4 {
  font-size: 40px;
}

h5, h1.as_h5 {
	font-size: 29px;
}

h5.as_h7 {
	font-size: 30px;
}

h6 {
	font-size: 16px;
	text-transform: uppercase;
	color: var(--red);
}

h2.upper_h {
  font-size: 26px;
  color: var(--red);
  text-transform: uppercase;
}

.fg_red {
	color: var(--red) !important;
}

.bg_red {
	background: var(--red);
}

.bg_light-grey {
	background: var(--light-grey);
}

.bg_dark {
	background: #211f1d;
}

.bg_dark .counter {
	color: var(--white);
}

div.light_fonts p, 
div.light_fonts h4, 
div.light_fonts h5, 
div.light_fonts h6, 
div.light_fonts a,
div.light_fonts label,
div.light_fonts label a
{
	color: var(--white) !important;	
}

@media (max-width: 767px) {

	h1 {
	  font-size: clamp(32px, 8vw, 44px);
	}

	h2 {
	  font-size: 34px;
	}

	h3, h2.as_h3 {
	  font-size: 28px;
	}

	h4, h2.as_h4 {
	  font-size: 24px;
	}

	h5 {
	  font-size: 22px;
	}

	h6 {
	  font-size: 16px;
	}
	
}