@charset 'UTF-8';

@font-face {
    font-family: "IBM Plex Serif", serif;;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TTNorms";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/TTNorms-Regular.woff") format("woff"), url("../fonts/TTNorms-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "TTNorms";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/TTNorms-DemiBold.woff") format("woff"), url("../fonts/TTNorms-DemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "TTNorms";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/TTNorms-Bold.woff") format("woff"), url("../fonts/TTNorms-Bold.woff2") format("woff2");
}

:root {
    --ss:100/1280;
	
	/*	COLOURS */
	--white:#FFFFFF;
	
	--pink:#E71D72;
	--pink05:#FEF4F8;
	
	--black10:#EBEBEC;
	--black20:#D6D6DA;
	
	--grey05:#F9FAFB;
	--grey10:#F4F5F7;
	--grey20:#E8ECEF;
	
	--green:#00A19A;
	--green05:#F3FAFA;
	--green20:#CCECEB;
	--green40:#99D9D7;
	
	--blue05:#F2F7FA;
	--blue10:#E5EEF5;
	
	--navy:#08284B;
	--navy40:#9BA9B7;
	--navy50:#7C97B1;
	--navy60:#6C7E93;
	--navy70:#61748A;
	--navy80:#3A536F;
	
	--excellent:#187E5E;
	--excellent-light:#74B29E;
	--good:#8BC9A9;
	--good-light:#B9DFCB;
	--average:#FCD17E;
	--average-light:#FAF0DB;
	--higher:#E46463;
	--higher-light:#FFB190;
	--high:#B24241;
	--high-light:#D18E8D;

	/*	FONTS */
    --ff: "TTNorms", sans-serif;
    --hff: "IBM Plex Serif", serif;

    --h1:normal 400 calc(var(--ss)*48vw) / 1.14em var(--hff);
	--h1alt:normal 400 calc(var(--ss)*40vw) / 1.14em var(--hff);
	--h1ed:normal 700 calc(var(--ss)*56vw) / 1.27em var(--ff);
	--h2:normal 700 calc(var(--ss)*22vw) / 1.27em var(--ff);
	--h2ed:normal 700 calc(var(--ss)*32vw) / 1.27em var(--ff);
	--h3:normal 700 calc(var(--ss)*22vw) / 1.27em var(--ff);
	--h4:normal 600 calc(var(--ss)*18vw) / 1.45em var(--ff);
	--h5:normal 600 calc(var(--ss)*16vw) / 1.45em var(--ff);
	
	--p1:normal 400 calc(var(--ss)*18vw) / 1.45em var(--ff);
	--p2:normal 400 calc(var(--ss)*16vw) / 1.45em var(--ff);
	
	--header:normal 700 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) var(--ff);
	--footer-legal:normal 400 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) var(--ff);
	
	--checklist:normal 600 calc(var(--ss)*18vw) / calc(var(--ss)*26.1vw) var(--ff);
	
	--circle:normal 700 calc(var(--ss)*26vw) / calc(var(--ss)*26vw) var(--ff);
	
	--question:normal 700 calc(var(--ss)*32vw) / normal var(--ff);
	--radio:normal 600 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) var(--ff);
	
	 --btn:normal 600 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) var(--ff);
	 --btn-s:normal 600 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) var(--ff);

    --header-height:calc(var(--ss)*92vw);
	--icon-size:calc(var(--ss)*24vw);
	--field-height:calc(var(--ss)*56vw);

	/*	Border-radius */
	--radius:calc(var(--ss)*16vw);
	--radius-s:calc(var(--ss)*8vw);
	--radius-m:calc(var(--ss)*12vw);
	--radius-l:calc(var(--ss)*48vw);
	
	/*	Static Spacings */
	--spacing-1:calc(var(--ss)*4vw);
	--spacing-2:calc(var(--ss)*8vw);
	--spacing-3:calc(var(--ss)*12vw);
	--spacing-4:calc(var(--ss)*16vw);
	--spacing-5:calc(var(--ss)*24vw);
	--spacing-6:calc(var(--ss)*32vw);
	--spacing-7:calc(var(--ss)*40vw);
	--spacing-8:calc(var(--ss)*48vw);
	--spacing-9:calc(var(--ss)*56vw);
	
	/*	Responsive Spacings */
	--spacing-r-1:calc(var(--ss)*64vw);
	--spacing-r-2:calc(var(--ss)*72vw);
	--spacing-r-3:calc(var(--ss)*80vw);
	--spacing-r-4:calc(var(--ss)*96vw);
	--spacing-r-5:calc(var(--ss)*112vw);
	--spacing-r-6:calc(var(--ss)*128vw);
	--spacing-r-7:calc(var(--ss)*144vw);
	
	
	--hpad:var(--spacing-r-1);
}

@media(min-width:769px){
	.education-hub{
		--h1:normal 700 calc(var(--ss)*56vw) / 1.27em var(--ff);
		--h2:normal 700 calc(var(--ss)*32vw) / 1.27em var(--ff);
		--h4:normal 700 calc(var(--ss)*20vw) / 1.27em var(--ff);
		--p1:normal 400 calc(var(--ss)*20vw) / 1.45em var(--ff);
	}
}

@media(max-width:768px){
	:root {
    	--ss:100/393;
		
		--h1:normal 400 calc(var(--ss)*36vw) / 1.14em var(--hff);
		--h1alt:normal 400 calc(var(--ss)*30vw) / 1.14em var(--hff);
		--h2:normal 700 calc(var(--ss)*20vw) / 1.27em var(--ff);
		--h3:normal 700 calc(var(--ss)*20vw) / 1.27em var(--ff);
		--h4:normal 600 calc(var(--ss)*16vw) / 1.45em var(--ff);
		--h5:normal 600 calc(var(--ss)*14vw) / 1.45em var(--ff);

		--p1:normal 400 calc(var(--ss)*16vw) / 1.45em var(--ff);
		--p2:normal 400 calc(var(--ss)*14vw) / 1.45em var(--ff);

		--header:normal 700 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) var(--ff);
		--footer-legal:normal 400 calc(var(--ss)*12vw) / calc(var(--ss)*12vw) var(--ff);

		--checklist:normal 600 calc(var(--ss)*16vw) / 1.45em var(--ff);

		--circle:normal 700 calc(var(--ss)*22vw) / calc(var(--ss)*22vw) var(--ff);

		--question:normal 700 calc(var(--ss)*26vw) / normal var(--ff);
		--radio:normal 600 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) var(--ff);

		 --btn:normal 600 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) var(--ff);
		 --btn-s:normal 600 calc(var(--ss)*12vw) / calc(var(--ss)*12vw) var(--ff);
		
		--icon-size:calc(var(--ss)*20vw);
		
		/*	Responsive Spacings */
		--spacing-r-1:calc(var(--ss)*56vw);
		--spacing-r-2:calc(var(--ss)*64vw);
		--spacing-r-3:calc(var(--ss)*72vw);
		--spacing-r-4:calc(var(--ss)*72vw);
		--spacing-r-5:calc(var(--ss)*72vw);
		--spacing-r-6:calc(var(--ss)*80vw);
		--spacing-r-7:calc(var(--ss)*80vw);
		
		--hpad:calc(var(--spacing-r-1) / 2);
	}
}