/*
*
* DO NOT EDIT THIS FILE
*
* THIS FILE GETS OVERWRITTEN BY GLOBAL OPTIONS
*
*/


:root {

/*  Site Colours  */
--color-white: #ffffff;
--color-grey: #efefef;
--color-black: #000000;
--color-light-teal: #BFFDFC;
--color-dark-grey: #1E1E1E;

/*  Vertical Spacing  */
--vert-spacing-1: 1rem;
--vert-spacing-2: 2rem;
--vert-spacing-3: 3rem;
--vert-spacing-4: clamp(4rem, 8vw, 7rem);
--vert-spacing-5: clamp(6rem, 15vw, 9rem);

/*  Horizontal Spacing  */
--hori-spacing-1: clamp(1rem, 1vw, 6vw);
--hori-spacing-2: clamp(1rem, 2vw, 6vw);
--hori-spacing-3: clamp(1rem, 3vw, 6vw);
--hori-spacing-4: clamp(1rem, 4vw, 6vw);
--hori-spacing-5: clamp(1rem, 6vw, 6vw);

/*  Fonts  */
--body-font: 'Roboto';
--heading-font: 'Michroma';

}



/*  Vertical Spacing  */

.pt-1 {
  padding-top: var(--vert-spacing-1);
}
.pb-1 {
  padding-bottom: var(--vert-spacing-1);
}
.py-1 {
  padding-top: var(--vert-spacing-1);
  padding-bottom: var(--vert-spacing-1);
}
.mt-1 {
  margin-top: var(--vert-spacing-1);
}
.mb-1 {
  margin-bottom: var(--vert-spacing-1);
}
.my-1 {
  margin-top: var(--vert-spacing-1);
  margin-bottom: var(--vert-spacing-1);
}
.pt-2 {
  padding-top: var(--vert-spacing-2);
}
.pb-2 {
  padding-bottom: var(--vert-spacing-2);
}
.py-2 {
  padding-top: var(--vert-spacing-2);
  padding-bottom: var(--vert-spacing-2);
}
.mt-2 {
  margin-top: var(--vert-spacing-2);
}
.mb-2 {
  margin-bottom: var(--vert-spacing-2);
}
.my-2 {
  margin-top: var(--vert-spacing-2);
  margin-bottom: var(--vert-spacing-2);
}
.pt-3 {
  padding-top: var(--vert-spacing-3);
}
.pb-3 {
  padding-bottom: var(--vert-spacing-3);
}
.py-3 {
  padding-top: var(--vert-spacing-3);
  padding-bottom: var(--vert-spacing-3);
}
.mt-3 {
  margin-top: var(--vert-spacing-3);
}
.mb-3 {
  margin-bottom: var(--vert-spacing-3);
}
.my-3 {
  margin-top: var(--vert-spacing-3);
  margin-bottom: var(--vert-spacing-3);
}
.pt-4 {
  padding-top: var(--vert-spacing-4);
}
.pb-4 {
  padding-bottom: var(--vert-spacing-4);
}
.py-4 {
  padding-top: var(--vert-spacing-4);
  padding-bottom: var(--vert-spacing-4);
}
.mt-4 {
  margin-top: var(--vert-spacing-4);
}
.mb-4 {
  margin-bottom: var(--vert-spacing-4);
}
.my-4 {
  margin-top: var(--vert-spacing-4);
  margin-bottom: var(--vert-spacing-4);
}
.pt-5 {
  padding-top: var(--vert-spacing-5);
}
.pb-5 {
  padding-bottom: var(--vert-spacing-5);
}
.py-5 {
  padding-top: var(--vert-spacing-5);
  padding-bottom: var(--vert-spacing-5);
}
.mt-5 {
  margin-top: var(--vert-spacing-5);
}
.mb-5 {
  margin-bottom: var(--vert-spacing-5);
}
.my-5 {
  margin-top: var(--vert-spacing-5);
  margin-bottom: var(--vert-spacing-5);
}
.py-0 {
 padding-top: 0;
 padding-bottom: 0;
 }
.my-0 {
 margin-top: 0;
 margin-bottom: 0;
 }


/*  Horizontal Spacing  */

.ps-1 {
  padding-left: var(--hori-spacing-1);
}
.pe-1 {
  padding-right: var(--hori-spacing-1);
}
.px-1 {
  padding-left: var(--hori-spacing-1);
  padding-right: var(--hori-spacing-1);
}
.ms-1 {
  margin-left: var(--hori-spacing-1);
}
.me-1 {
  margin-right: var(--hori-spacing-1);
}
.mx-1 {
  margin-left: var(--hori-spacing-1);
  margin-right: var(--hori-spacing-1);
}
.ps-2 {
  padding-left: var(--hori-spacing-2);
}
.pe-2 {
  padding-right: var(--hori-spacing-2);
}
.px-2 {
  padding-left: var(--hori-spacing-2);
  padding-right: var(--hori-spacing-2);
}
.ms-2 {
  margin-left: var(--hori-spacing-2);
}
.me-2 {
  margin-right: var(--hori-spacing-2);
}
.mx-2 {
  margin-left: var(--hori-spacing-2);
  margin-right: var(--hori-spacing-2);
}
.ps-3 {
  padding-left: var(--hori-spacing-3);
}
.pe-3 {
  padding-right: var(--hori-spacing-3);
}
.px-3 {
  padding-left: var(--hori-spacing-3);
  padding-right: var(--hori-spacing-3);
}
.ms-3 {
  margin-left: var(--hori-spacing-3);
}
.me-3 {
  margin-right: var(--hori-spacing-3);
}
.mx-3 {
  margin-left: var(--hori-spacing-3);
  margin-right: var(--hori-spacing-3);
}
.ps-4 {
  padding-left: var(--hori-spacing-4);
}
.pe-4 {
  padding-right: var(--hori-spacing-4);
}
.px-4 {
  padding-left: var(--hori-spacing-4);
  padding-right: var(--hori-spacing-4);
}
.ms-4 {
  margin-left: var(--hori-spacing-4);
}
.me-4 {
  margin-right: var(--hori-spacing-4);
}
.mx-4 {
  margin-left: var(--hori-spacing-4);
  margin-right: var(--hori-spacing-4);
}
.ps-5 {
  padding-left: var(--hori-spacing-5);
}
.pe-5 {
  padding-right: var(--hori-spacing-5);
}
.px-5 {
  padding-left: var(--hori-spacing-5);
  padding-right: var(--hori-spacing-5);
}
.ms-5 {
  margin-left: var(--hori-spacing-5);
}
.me-5 {
  margin-right: var(--hori-spacing-5);
}
.mx-5 {
  margin-left: var(--hori-spacing-5);
  margin-right: var(--hori-spacing-5);
}
.px-0 {
 padding-left: 0;
 padding-right: 0;
 }
.mx-0 {
 margin-left: 0;
 margin-right: 0;
 }
.p-0 {
 padding: 0;
 }
.m-0 {
 margin: 0;
 }

/*  Background Colours and Spacing Correction  */

.bg-white {
  background-color: var(--color-white);
}
.bg-white + .bg-white > div[class*='pt'], .bg-white + .bg-white > div[class*='py'] {
  padding-top: 0;
}
.bg-grey {
  background-color: var(--color-grey);
}
.bg-grey + .bg-grey > div[class*='pt'], .bg-grey + .bg-grey > div[class*='py'] {
  padding-top: 0;
}
.bg-black {
  background-color: var(--color-black);
}
.bg-black + .bg-black > div[class*='pt'], .bg-black + .bg-black > div[class*='py'] {
  padding-top: 0;
}
.bg-light-teal {
  background-color: var(--color-light-teal);
}
.bg-light-teal + .bg-light-teal > div[class*='pt'], .bg-light-teal + .bg-light-teal > div[class*='py'] {
  padding-top: 0;
}
.bg-dark-grey {
  background-color: var(--color-dark-grey);
}
.bg-dark-grey + .bg-dark-grey > div[class*='pt'], .bg-dark-grey + .bg-dark-grey > div[class*='py'] {
  padding-top: 0;
}

/*  Base REM Size  */

html{
  font-size: clamp(16px, 1.1vw, 5vw);
}

/*  Font Sizes  */

body, body * {
  font-size: 1rem;
  font-family: 'Roboto';
}
h1, .h1, h1 *, .h1 *{
  font-size: clamp(1.8rem, 4vw, 3.3rem);
  font-family: 'Michroma';
}
h2, .h2, h2 *, .h2 * {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-family: 'Michroma';
}
h3, .h3, h3 *, .h3 * {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  font-family: 'Michroma';
}
h4, .h4, h4 *, .h4 * {
  font-size: clamp(1rem, 1vw, 2rem);
  font-family: 'Michroma';
}
h5, .h5, h5 *, .h5 * {
  font-size: clamp(1rem, 1vw, 2rem);
  font-family: 'Michroma';
}
h6, .h6, h6 *, .h6 * {
  font-size: clamp(1rem, 1vw, 2rem);
  font-family: 'Michroma';
}