:root {
  --black: #000000;
  --Grey900: #252525;
  --Grey800: #313131;
  --Grey700: #767676;
  --Grey600: #949494;
  --Grey500: #c6c6c6;
  --Grey400: #dedede;
  --Grey300: #f2f2f2;
  --Grey200: #f7f7f7;
  --white: #ffffff;
  --PrimaryBlueLight: #e0e2f0;
  --PrimaryBlue: #001080;
  --PrimaryBlueDark: #000963;
  --PrimaryRedLight: #fadde0;
  --PrimaryRed: #da192e;
  --PrimaryRedDark: #ae1425;
  --SecondaryBlue: #00587d;
  --SecondaryYellow: #ebc31d;
  --SecondaryMagenta: #922353;
  --SecondaryGreen: #44580f;
  --SecondaryTeal: #045c5a;
  --SecondaryBrown: #7d4407;
  --SecondaryPurple: #614096;
  --SecondaryDarkGreen: #004920;
  --SecondaryBlueLight: #d9ecf4;
  --SecondaryYellowLight: #fff9e0;
  --SecondaryMagentaLight: #f8e0ea;
  --SecondaryGreenLight: #e7ecdc;
  --SecondaryTealLight: #daedec;
  --SecondaryBrownLight: #f3e7da;
  --SecondaryPurpleLight: #eee7f9;
  --SecondaryDarkGreenLight: #d9e8e0;

  /* Alert */
  --AlertInfoLight: #d9ecf4;
  --AlertInfo: #007db3;
  --AlertInfoDark: #00587d;
  --AlertErrorLight: #ae1425;
  --AlertError: #da192e;
  --AlertErrorDark: #fadde0;
  --AlertWarningLight: #faebd9;
  --AlertWarning: #df7b00;
  --AlertWarningDark: #b26200;
  --AlertSuccessLight: #dbedd9;
  --AlertSuccess: #108600;
  --AlertSuccessDark: #0d6b00;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-50: 4px;
  --spacing-100: 8px;
  --spacing-200: 16px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 48px;
  --spacing-600: 64px;
  --spacing-700: 80px;
  --spacing-800: 96px;
  --spacing-900: 128px;
  --spacing-1000: 144px;
  --spacing-1100: 160px;
}
/* 200 */
.mt--spacing-200 {
  margin-top: var(--spacing-200);
}
.ml--spacing-200 {
  margin-left: var(--spacing-200);
}
.mb--spacing-200 {
  margin-bottom: var(--spacing-200);
}
.mr--spacing-200 {
  margin-right: var(--spacing-200);
}
.mx--spacing-200 {
  margin-right: var(--spacing-200);
  margin-left: var(--spacing-200);
}
.my--spacing-200 {
  margin-top: var(--spacing-200);
  margin-bottom: var(--spacing-200);
}
.pt--spacing-200 {
  padding-top: var(--spacing-200);
}
.pl--spacing-200 {
  padding-left: var(--spacing-200);
}
.pb--spacing-200 {
  padding-bottom: var(--spacing-200);
}
.pr--spacing-200 {
  padding-right: var(--spacing-200);
}
.px--spacing-200 {
  padding-right: var(--spacing-200);
  padding-left: var(--spacing-200);
}
.py--spacing-200 {
  padding-top: var(--spacing-200);
  padding-bottom: var(--spacing-200);
}

/* 300 */
.mt--spacing-300 {
  margin-top: var(--spacing-300);
}
.ml--spacing-300 {
  margin-left: var(--spacing-300);
}
.mb--spacing-300 {
  margin-bottom: var(--spacing-300);
}
.mr--spacing-300 {
  margin-right: var(--spacing-300);
}
.mx--spacing-300 {
  margin-right: var(--spacing-300);
  margin-left: var(--spacing-300);
}
.my--spacing-300 {
  margin-top: var(--spacing-300);
  margin-bottom: var(--spacing-300);
}
.pt--spacing-300 {
  padding-top: var(--spacing-300);
}
.pl--spacing-300 {
  padding-left: var(--spacing-300);
}
.pb--spacing-300 {
  padding-bottom: var(--spacing-300);
}
.pr--spacing-300 {
  padding-right: var(--spacing-300);
}
.px--spacing-300 {
  padding-right: var(--spacing-300);
  padding-left: var(--spacing-300);
}
.py--spacing-300 {
  padding-top: var(--spacing-300);
  padding-bottom: var(--spacing-300);
}
/* 400 */
.mt--spacing-400 {
  margin-top: var(--spacing-400);
}
.ml--spacing-400 {
  margin-left: var(--spacing-400);
}
.mb--spacing-400 {
  margin-bottom: var(--spacing-400);
}
.mr--spacing-400 {
  margin-right: var(--spacing-400);
}
.mx--spacing-400 {
  margin-right: var(--spacing-400);
  margin-left: var(--spacing-400);
}
.my--spacing-400 {
  margin-top: var(--spacing-400);
  margin-bottom: var(--spacing-400);
}
.pt--spacing-400 {
  padding-top: var(--spacing-400);
}
.pl--spacing-400 {
  padding-left: var(--spacing-400);
}
.pb--spacing-400 {
  padding-bottom: var(--spacing-400);
}
.pr--spacing-400 {
  padding-right: var(--spacing-400);
}
.px--spacing-400 {
  padding-right: var(--spacing-400);
  padding-left: var(--spacing-400);
}
.py--spacing-400 {
  padding-top: var(--spacing-400);
  padding-bottom: var(--spacing-400);
}

/* Primary CTA */
.primary-sm {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: bold;
  border-radius: 100px;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 16px;
  color: var(--white);
  background-color: var(--PrimaryBlue);
  border-bottom: none;
}

.primary-sm:hover {
  background-color: var(--PrimaryBlueDark);
  color: var(--white);
}

.primary-md {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: bold;
  border-radius: 100px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 24px;
  color: var(--white);
  background-color: var(--PrimaryBlue);
  border-bottom: none;
}

.primary-md:hover {
  background-color: var(--PrimaryBlueDark);
  color: var(--white);
}

.primary-lg {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: bold;
  border-radius: 100px;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 24px;
  color: var(--white);
  background-color: var(--PrimaryBlue);
  border-bottom: none;
}

.primary-lg:hover {
  background-color: var(--PrimaryBlueDark);
  color: var(--white);
}

/* Secondary CTA */
.secondary-sm {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: bold;
  border-radius: 100px;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 16px;
  color: var(--PrimaryBlue);
  background-color: var(--white);
  border: 2px solid var(--PrimaryBlue) !important;
}

.secondary-sm:hover {
  background-color: var(--PrimaryBlueLight);
  color: var(--PrimaryBlue);
  border-bottom-color: var(--PrimaryBlue) !important;
}

.secondary-md {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: bold;
  border-radius: 100px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 24px;
  color: var(--PrimaryBlue);
  background-color: var(--white);
  border: 2px solid var(--PrimaryBlue) !important;
}

.secondary-md:hover {
  background-color: var(--PrimaryBlueLight);
  color: var(--PrimaryBlue);
  border-bottom-color: var(--PrimaryBlue) !important;
}

.secondary-lg {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-weight: bold;
  border-radius: 100px;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 24px;
  color: var(--PrimaryBlue);
  background-color: var(--white);
  border: 2px solid var(--PrimaryBlue) !important;
}

.secondary-lg:hover {
  background-color: var(--PrimaryBlueLight);
  color: var(--PrimaryBlue);
  border-bottom-color: var(--PrimaryBlue) !important;
}

/* END Secondary CTA */

.border-0 {
  border: none !important;
}
.radius-0 {
  border-radius: 0 !important;
}

/*  Bullet points*/
.list-none {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Link decoration and underline */
.border-bottom-0 {
  text-decoration: none;
  border-bottom: 0 !important;
  font-weight: 700 !important;
  color: var(--PrimaryBlue) !important;
}
a.border-bottom-0:hover {
  text-decoration: underline !important;
}
a.border-bottom--primary {
  color: #001080 !important;
  border-bottom-color: #001080 !important;
}

.rounded {
  border-radius: 8px;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-inline {
  display: inline !important;
}

.v-hidden {
  visibility: hidden !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.m-0 {
  margin: 0 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-double {
  margin: 40px 40px !important;
}

.mt-double {
  margin-top: 40px !important;
}

.mr-double {
  margin-right: 40px !important;
}

.mb-double {
  margin-bottom: 40px !important;
}

.ml-double {
  margin-left: 40px !important;
}

.mx-double {
  margin-right: 40px !important;
  margin-left: 40px !important;
}

.my-double {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.m-standard {
  margin: 20px 20px !important;
}

.mt-standard {
  margin-top: 20px !important;
}

.mr-standard {
  margin-right: 20px !important;
}

.mb-standard {
  margin-bottom: 20px !important;
}

.ml-standard {
  margin-left: 20px !important;
}

.mx-standard {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.my-standard {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.m-half {
  margin: 10px 10px !important;
}

.mt-half {
  margin-top: 10px !important;
}

.mr-half {
  margin-right: 10px !important;
}

.mb-half {
  margin-bottom: 10px !important;
}

.ml-half {
  margin-left: 10px !important;
}

.mx-half {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.my-half {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.m-quarter {
  margin: 5px 5px !important;
}

.mt-quarter {
  margin-top: 5px !important;
}

.mr-quarter {
  margin-right: 5px !important;
}

.mb-quarter {
  margin-bottom: 5px !important;
}

.ml-quarter {
  margin-left: 5px !important;
}

.mx-quarter {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.my-quarter {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.p-0 {
  padding: 0 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-double {
  padding: 40px 40px !important;
}

.pt-double {
  padding-top: 40px !important;
}

.pr-double {
  padding-right: 40px !important;
}

.pb-double {
  padding-bottom: 40px !important;
}

.pl-double {
  padding-left: 40px !important;
}

.px-double {
  padding-right: 40px !important;
  padding-left: 40px !important;
}

.py-double {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.p-standard {
  padding: 20px 20px !important;
}

.pt-standard {
  padding-top: 20px !important;
}

.pr-standard {
  padding-right: 20px !important;
}

.pb-standard {
  padding-bottom: 20px !important;
}

.pl-standard {
  padding-left: 20px !important;
}

.px-standard {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.py-standard {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.p-half {
  padding: 10px 10px !important;
}

.pt-half {
  padding-top: 10px !important;
}

.pr-half {
  padding-right: 10px !important;
}

.pb-half {
  padding-bottom: 10px !important;
}

.pl-half {
  padding-left: 10px !important;
}

.px-half {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.py-half {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.p-quarter {
  padding: 5px 5px !important;
}

.pt-quarter {
  padding-top: 5px !important;
}

.pr-quarter {
  padding-right: 5px !important;
}

.pb-quarter {
  padding-bottom: 5px !important;
}

.pl-quarter {
  padding-left: 5px !important;
}

.px-quarter {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.py-quarter {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Desktop Fonts */
.ow--p {
  font-family: Arial;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--Grey900) !important;
}

.ow--h1 {
  font-size: 36px !important;
  line-height: 48px !important;
  /* font-family: Demi, officeworks, sans-serif !important; */
  font-weight: 600 !important;
  color: var(--Grey900) !important;
}

.ow--h2 {
  font-size: 26px !important;
  line-height: 32px !important;
  /* font-family: Demi, officeworks, sans-serif !important; */
  font-weight: 600 !important;
  color: var(--Grey900) !important;
}

.ow--h3 {
  font-size: 20px !important;
  line-height: 28px !important;
  /* font-family: Demi, officeworks, sans-serif !important; */
  font-weight: 600 !important;
  color: var(--Grey900) !important;
}

.ow--h4 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: var(--Grey900) !important;
  font-size: 18px !important;
  line-height: 24px !important;
}

.ow--h5 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: var(--Grey900) !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

/* END Desktop Fonts */
/* Mobile Fonts */
@media screen and (max-width: 575px) {
  .ow--h1 {
    font-size: 32px !important;
    line-height: 44px !important;
  }

  .ow--h2 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .ow--h3 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .ow--h4 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .ow--h5 {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .ow--p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }
}

/* END Mobile Fonts */