:root {

  /* COLOURS */
  /* * * * * * * * * * * * * * * * * * * * */
  --purple-light: #8f89a2;
  --purple: #6f5aa3;
  --purple-dark: #201547;

  --grey-light: #eaeded;
  --grey: #a1a1a1;
  --grey-dark: #646366;

  --yellow-light: #fddba3;
  --yellow: #faa61a;

  --orange-light: #f9ba90;
  --orange: #f47521;

  --woven-light: #f389ac;
  --woven: #e71358;

  --cloud-light: #89DAF4;
  --cloud: #13b5ea;

  --iq-light: #a3dfd7; 
  --iq: #47bfaf;

  /* Headings */
  /* * * * * * * * * * * * * * * * * * * * */

  --heading-color: #201547;
  --heading-weight: 600;
  --heading-size: 1.9em;

  --font-base: 1rem;

  --module-spacing: 3.75rem;
  --max-width-content: 960px;
}

#main h1, 
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  color: var(--purple-dark);
  font-weight: var(--heading-weight);
}

.fill-orange {
  fill:var(--orange);
}
.fill-orange-light {
  fill:var(--orange-light);
}



/* PADDING OVERRIDES */
.pt-0{ padding-top: 0 !important; }
.pt-20{ padding-top: 20px !important; }
.pt-30{ padding-top: 30px !important; }
.pt-40{ padding-top: 40px !important; }
.pt-60{ padding-top: 60px !important; }
.pt-100{ padding-top: 100px !important; }

.pb-0{ padding-bottom: 0 !important; }
.pb-20{ padding-bottom: 20px !important; }
.pb-30{ padding-bottom: 30px !important; }
.pb-40{ padding-bottom: 40px !important; }
.pb-60{ padding-bottom: 60px !important; }
.pb-100{ padding-bottom: 100px !important; }

@media screen and (max-width: 640px){
	.pts-0{ padding-top: 0 !important; }
	.pts-20{ padding-top: 20px !important; }
	.pts-30{ padding-top: 30px !important; }
	.pts-40{ padding-top: 40px !important; }
	.pts-60{ padding-top: 60px !important; }
	.pts-100{ padding-top: 100px !important; }
	
	.pbs-0{ padding-bottom: 0 !important; }
	.pbs-20{ padding-bottom: 20px !important; }
	.pbs-30{ padding-bottom: 30px !important; }
	.pbs-40{ padding-bottom: 40px !important; }
	.pbs-60{ padding-bottom: 60px !important; }
	.pbs-100{ padding-bottom: 100px !important; }
}

@media screen and (min-width: 641px) and (max-width: 1024px){
	.ptm-0{ padding-top: 0 !important; }
	.ptm-20{ padding-top: 20px !important; }
	.ptm-30{ padding-top: 30px !important; }
	.ptm-40{ padding-top: 40px !important; }
	.ptm-60{ padding-top: 60px !important; }
	.ptm-100{ padding-top: 100px !important; }
	
	.pbm-0{ padding-bottom: 0 !important; }
	.pbm-20{ padding-bottom: 20px !important; }
	.pbm-30{ padding-bottom: 30px !important; }
	.pbm-40{ padding-bottom: 40px !important; }
	.pbm-60{ padding-bottom: 60px !important; }
	.pbm-100{ padding-bottom: 100px !important; }
}

@media screen and (min-width: 1025px){
	.ptl-0{ padding-top: 0 !important; }
	.ptl-20{ padding-top: 20px !important; }
	.ptl-30{ padding-top: 30px !important; }
	.ptl-40{ padding-top: 40px !important; }
	.ptl-60{ padding-top: 60px !important; }
	.ptl-100{ padding-top: 100px !important; }
	
	.pbl-0{ padding-bottom: 0 !important; }
	.pbl-20{ padding-bottom: 20px !important; }
	.pbl-30{ padding-bottom: 30px !important; }
	.pbl-40{ padding-bottom: 40px !important; }
	.pbl-60{ padding-bottom: 60px !important; }
	.pbl-100{ padding-bottom: 100px !important; }
}

/* MARGIN OVERRIDES */
.mt-0{ margin-top: 0 !important; }
.mt-20{ margin-top: 20px !important; }
.mt-30{ margin-top: 30px !important; }
.mt-40{ margin-top: 40px !important; }
.mt-60{ margin-top: 60px !important; }
.mt-100{ margin-top: 100px !important; }

.mb-0{ margin-bottom: 0 !important; }
.mb-20{ margin-bottom: 20px !important; }
.mb-30{ margin-bottom: 30px !important; }
.mb-40{ margin-bottom: 40px !important; }
.mb-60{ margin-bottom: 60px !important; }
.mb-100{ margin-bottom: 100px !important; }

@media screen and (max-width: 640px){
	.mts-0{ margin-top: 0 !important; }
	.mts-20{ margin-top: 20px !important; }
	.mts-30{ margin-top: 30px !important; }
	.mts-40{ margin-top: 40px !important; }
	.mts-60{ margin-top: 60px !important; }
	.mts-100{ margin-top: 100px !important; }
	
	.mbs-0{ margin-bottom: 0 !important; }
	.mbs-20{ margin-bottom: 20px !important; }
	.mbs-30{ margin-bottom: 30px !important; }
	.mbs-40{ margin-bottom: 40px !important; }
	.mbs-60{ margin-bottom: 60px !important; }
	.mbs-100{ margin-bottom: 100px !important; }
}

@media screen and (min-width: 641px) and (max-width: 1024px){
	.mtm-0{ margin-top: 0 !important; }
	.mtm-20{ margin-top: 20px !important; }
	.mtm-30{ margin-top: 30px !important; }
	.mtm-40{ margin-top: 40px !important; }
	.mtm-60{ margin-top: 60px !important; }
	.mtm-100{ margin-top: 100px !important; }
	
	.mbm-0{ margin-bottom: 0 !important; }
	.mbm-20{ margin-bottom: 20px !important; }
	.mbm-30{ margin-bottom: 30px !important; }
	.mbm-40{ margin-bottom: 40px !important; }
	.mbm-60{ margin-bottom: 60px !important; }
	.mbm-100{ margin-bottom: 100px !important; }
}

@media screen and (min-width: 1025px){
	.mtl-0{ margin-top: 0 !important; }
	.mtl-20{ margin-top: 20px !important; }
	.mtl-30{ margin-top: 30px !important; }
	.mtl-40{ margin-top: 40px !important; }
	.mtl-60{ margin-top: 60px !important; }
	.mtl-100{ margin-top: 100px !important; }
	
	.mbl-0{ margin-bottom: 0 !important; }
	.mbl-20{ margin-bottom: 20px !important; }
	.mbl-30{ margin-bottom: 30px !important; }
	.mbl-40{ margin-bottom: 40px !important; }
	.mbl-60{ margin-bottom: 60px !important; }
	.mbl-100{ margin-bottom: 100px !important; }
}