@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
:root {
  --vsm-white:  255, 255, 255;
  --vsm-black:  9, 9, 9;
  --vsm-body-copy-colour:  116, 118, 120;
  --vsm-accent-colour:  255, 211, 68;
  --vsm-primary-colour:  255, 94, 0;
  --vsm-secondary-colour:  80, 74, 70;
  --vsm-tertiary-colour:  214, 218, 213;
  --vsm-quaternary-colour:  214, 218, 213;
  --vsm-quinary-colour:  214, 218, 213;
}

:root {
  --vsm-mobile-padding-top: 30px;
  --vsm-mobile-padding-bottom: 30px;
  --vsm-tablet-padding-top: 50px;
  --vsm-tablet-padding-bottom: 50px;
  --vsm-desktop-padding-top: 80px;
  --vsm-desktop-padding-bottom: 80px;
}

/* **** EXTRA WIDE CONTAINER **** */
.container.wide {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container.wide {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container.wide {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container.wide {
    width: 100%;
    max-width: 90%;
  }
}

/* NO GUTTERS */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* ------------------------------
Icons
--------------------------------*/
/* ------------------------------
Typography
--------------------------------*/
html,
body {
  height: 100% !important;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 300;
  font-size: 12px;
}

@media (min-width: 768px) {
  html,
  body {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  html,
  body {
    font-size: 16px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

ul,
ol,
dd,
p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 300;
}

ul strong,
ol strong,
dd strong,
p strong {
  font-weight: 600;
}

a {
  color: #ff5e00;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
  color: #FFD344;
}

.heading {
  font-size: 70px;
  font-size: 4.375rem;
}

.md-heading {
  font-size: 40px;
  font-size: 2.5rem;
}

.sm-heading {
  font-size: 30px;
  font-size: 1.875rem;
}

.xs-heading {
  font-size: 18px;
  font-size: 1.125rem;
}

.xxs-heading {
  font-size: 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sub-heading {
  font-size: 20px;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ------------------------------
Buttons
--------------------------------*/
/* ------------------------------
Forms
--------------------------------*/
/* ***** FORM VALIDATION MESSAGES ****** */
.field-validation-error,
.field-validation-valid,
.validation-summary-errors {
  /* DEFAULT STYLES FOR VALIDATION MESSAGES - CLASS BASED ON DEV REQUIREMENTS */
}

/* ------------------------------
Theme
--------------------------------*/