:root {
	--ap-blue: #0055AA;
	--ap-blue-eu: #0042C5;
	--ap-blue-dark: #1B3350;
	--ap-teal: #00838C;
	--ap-teal-dark: #00272A;
	--ap-teal-deep: #001517;
	--ap-teal-highlight: #C4E7E9;
	--ap-teal-soft: #C9DEE0;
	--ap-teal-pale: #E6F0F0;	
	--ap-teal-mist: #E9F0F0;
	--ap-teal-ice: #EBFDFF;
	--ap-teal-bright: #00AFBB;
	--ap-teal-muted: #006B70;
	--ap-teal-ink: #073138;
	--ap-white: #FFFFFF;
	--ap-grey-100: #F2F7F7;
	--ap-grey-200: #E8EDED;
	--ap-grey-300: #D5DEDE;
	--ap-grey-500: #637273;
	--ap-grey-900: #1C1C1C;
	--ap-black: #000000;
	--ap-gold: #FBBC04;
	--ap-blue-100: #E0EFFF;
	--ap-blue-200: #BFD5FA;
	--ap-red: #D63D31;
	--ap-alpha-teal-10: rgba(0, 39, 42, 0.1);
	--ap-alpha-teal-20: rgba(0, 39, 42, 0.2);
	--ap-alpha-teal-25: rgba(0, 39, 42, 0.25);
	--ap-alpha-teal-40: rgba(0, 39, 42, 0.4);
	--ap-alpha-gold-25: rgba(251, 188, 4, 0.25);
	--ap-alpha-black-10: rgba(0, 0, 0, 0.1);
	--ap-alpha-black-20: rgba(0, 0, 0, 0.2);
	--ap-alpha-black-40: rgba(0, 0, 0, 0.4);
	--ap-alpha-black-60: rgba(0, 0, 0, 0.6);
	--ap-alpha-white-15: rgba(255, 255, 255, 0.15);
	--ap-alpha-white-30: rgba(255, 255, 255, 0.3);
	--ap-alpha-white-50: rgba(255, 255, 255, 0.5);

	--ap-primary-color: var(--ap-teal);
	--ap-font-color: var(--ap-teal-dark);
	--ap-font-color-light: var(--ap-white);
	--ap-card-bg-color: var(--ap-grey-100);

	--ap-font-family: 'Plus Jakarta Sans', 'Trebuchet MS', Arial, sans-serif;
	--ap-font-family-medium: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', 'Trebuchet MS', Arial, sans-serif;
	--ap-font-family-semibold: 'Plus Jakarta Sans SemiBold', 'Plus Jakarta Sans', 'Trebuchet MS', Arial, sans-serif;
  	--ap-font-family-bold: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', 'Trebuchet MS', Arial, sans-serif;
  	--ap-font-family-secondary-bold: 'DM Sans', 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', 'Trebuchet MS', Arial, sans-serif;
	--ap-font-family-numberplate-bold: 'Barlow', 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', 'Trebuchet MS', Arial, sans-serif;

	/* Variables can't be used in media queries, they're kept here as a reference */
    --mq-horizontal-phone: 30rem;
    --mq-vertical-tablet: 48rem;
    --mq-horizontal-tablet: 64rem;
    --mq-desktop: 75rem;
    --mq-desktop-lg: 90rem;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans Medium';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans SemiBold';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans Bold';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/DMSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/Barlow-Bold.ttf') format('truetype');
}