/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Colors
 --------------------------------------------- */
:root {
  --green: #62A87C;
  --navy: #3B3F5D;
  --khaki: #A1A194;
  --white: #ffffff;
  --black: #000000;
  --coral: #B06565;
  --muesli: #AB835D;
  --gray-100: #F2F2F2;
  --gray-200: #D9D9D9;
  --gray-300: #B4B4B4;
  --gray-400: #828382;
  --gray-500: #505250;
  --gray-600: #1E201E;
  --gray-700: #050806;
  --gray-800: #040605;
  --gray-900: #030504;
}

.green { color: var(--green); }
.navy { color: var(--navy); }
.khaki { color: var(--khaki); }
.white { color: var(--white); }
.black { color: var(--black); }
.coral { color: var(--coral); }
.muesli { color: var(--muesli); }
.gray { color: var(--gray-100); }
.gray-100 { color: var(--gray-100); }
.gray-200 { color: var(--gray-200); }
.gray-300 { color: var(--gray-300); }
.gray-400 { color: var(--gray-400); }
.gray-500 { color: var(--gray-500); }
.gray-600 { color: var(--gray-600); }
.gray-700 { color: var(--gray-700); }
.gray-800 { color: var(--gray-800); }
.gray-900 { color: var(--gray-900); }

.bg-green    { background-color: var(--green); }
.bg-navy     { background-color: var(--navy); }
.bg-khaki    { background-color: var(--khaki); }
.bg-white    { background-color: var(--white); }
.bg-black    { background-color: var(--black); }
.bg-coral    { background-color: var(--coral); }
.bg-muesli   { background-color: var(--muesli); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }



/* Typography
 --------------------------------------------- */
html {
  font-size: 100%;
}

body {
  --text-size-80: 0.64rem;
  --text-size-90: 0.8rem;
  --text-size-100: 1rem;
  --text-size-200: 1.25rem;
  --text-size-300: 1.563rem;
  --text-size-400: 1.953rem;
  --text-size-500: 2.441rem;
  --text-size-600: 3.052rem;
  --text-size-700: 3.815rem;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--white);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
	font-size: 1.1rem;
}

small {
  font-size: var(--text-size-90);
}

h6,
.h6 {
  font-size: var(--text-size-200);
}

h5,
.h5 {
  font-size: var(--text-size-300);
}

h4,
.h4 {
  font-size: var(--text-size-400);
}

h3,
.h3 {
  font-size: var(--text-size-500);
}

h2,
.h2 {
  font-size: var(--text-size-600);
}

h1,
.h1 {
  font-size: var(--text-size-700);
}

.text-size-80 {
  font-size: var(--text-size-80);
}

.text-size-90 {
  font-size: var(--text-size-90);
}

.text-size-100 {
  font-size: var(--text-size-100);
}

.text-size-200 {
  font-size: var(--text-size-200);
}

.text-size-300 {
  font-size: var(--text-size-300);
}

.text-size-400 {
  font-size: var(--text-size-400);
}

.text-size-500 {
  font-size: var(--text-size-500);
}

.text-size-600 {
  font-size: var(--text-size-600);
}

.text-size-700 {
  font-size: var(--text-size-700);
}