:root {
  /*-- GENERAL COLOURS --*/
  --primaryDark: #283961;
  --primary: #164e84;
  --primaryLight: #3a78b3;
  --cta: #38a093;
  --bgColor: #f1f1f1;
  --fontColor: #555;
  --headingColor: #111;
  --opacityColor: 0,0,0;
  /*----------------------------------------------------
  /*-- GENERAL VARIABLES --*/
  --transition: all 0.3s ease;
  --borderRadius: .2em;
  --inputPadding: .5em;
  --gridSpacing: 1rem;
  --containerWidth: 1200px;
  --headingFont: inherit;
  --headingWeight: 700;
  --buttonBorderWidth: 2px;
  --buttonBorderRadius: 2em;
  /*----------------------------------------------------
  /*-- CARD VARIABLES --*/
  --cardBG: #fff;
  --cardTextColor: var(--fontColor);
  --cardBorder: 1px solid rgba(var(--opacityColor), 0.1);
  --cardShadow: 0 10px 10px -5px var(--opacity00);
  --cardBGHover: rgba(var(--opacityColor), 0.05);
  --cardShadowHover: 0 10px 20px -5px var(--opacity00);
  --cardTransformHover: none;
  --cardHeadingFont: inherit;
  --cardHeadingWeight: var(--headingWeight);
  --cardHeadingColor: var(--headingColor);
  /*----------------------------------------------------
  /*-- ADVANCED VARIABLES --*/
  --error: #CF000F;
  --warning: orange;
  --success: #26A65B;
  --white: #fff;
  --black: #000;
  --opacity100: rgba(var(--opacityColor), 1);
  --opacity90: rgba(var(--opacityColor), .9);
  --opacity80: rgba(var(--opacityColor), .8);
  --opacity70: rgba(var(--opacityColor), .7);
  --opacity60: rgba(var(--opacityColor), .6);
  --opacity50: rgba(var(--opacityColor), .5);
  --opacity40: rgba(var(--opacityColor), .4);
  --opacity30: rgba(var(--opacityColor), .3);
  --opacity20: rgba(var(--opacityColor), .2);
  --opacity10: rgba(var(--opacityColor), .1);
  --opacity05: rgba(var(--opacityColor), .05);
  --opacity03: rgba(var(--opacityColor), .03);
  --opacity00: rgba(var(--opacityColor), .00);
}