:root {
  --font-family-heading: 'Roboto', 'Helvetica Neue','Segoe UI', 'Verdana', sans-serif;
  --font-family-body: 'Roboto', 'Helvetica Neue','Segoe UI', 'Verdana', sans-serif;
  --font-family-serif: 'Roboto Slab', serif;
  --font-family-monospace: 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-family-awesome: 'FontAwesome';
  --transition-sm: 300ms;
  --transition-md: 600ms;
  --transition-lg: 900ms;
  --font-size-base: 1.6rem;
  --font-size-h1: 3.6rem;
  --font-size-h2: 3.2rem;
  --font-size-h3: 2.8rem;
  --font-size-h4: 2.0rem;
  --font-size-h5: 1.8rem;
  --font-size-xs: 1rem;
  --font-size-sm: 1.2rem;
  --font-size-md: 1.4rem;
  --font-size-lg: 2rem;
  --line-height: 1.5;
  --baseline: calc(var(--font-size-base) * 1.5);
  --border-radius-sm: 0.2rem;
  --border-radius-lg: 100%;
  --screen-xs: 480px;
  --screen-sm: 768px;
  --screen-md: 992px;
  --screen-lg: 1200px;
  --black-color: #000000;
  --white-color: #FFFFFF;
  --grey-color: #E5E5E5;
  --body-color: var(--grey-color);
  --accent-color: #00a39e;
  --secondary-accent-color: #0a3853;
  --primary-text-color: rgba(#3C4858, 1);
  --secondary-text-color: rgba(0,0,0, 0.87);
  --title-text-color: #3c4858;
  --hint-text-color: rgba(0,0,0, 0.38);
  --divider-color: rgba(0,0,0, 0.12);
  --link-color: var(--accent-color);
  --font-weight-light: 300;
  --font-weight-bold: 700;
  --z-index-0: -1;
  --z-index-1: 100;
  --z-index-2: 200;
  --z-index-3: 300;
  --z-index-4: 400;
  --z-index-5: 500;
  --z-index-6: 600;
  --z-index-7: 700;
  --z-index-8: 800;
  --z-index-9: 900;
  --z-index-10: 1000;
}