/**
 * BASE STYLES
 *
 * Global default styles for standard HTML elements.
 *
 * This file should contain:
 * - Box-sizing rules
 * - Body defaults
 * - Typography defaults
 * - Heading styles (h1-h6)
 * - Paragraph styles
 * - Link defaults
 * - List defaults
 * - Image defaults
 * - Form element defaults
 * - Tables
 * - Basic accessibility/global behavior
 *
 * These styles apply to HTML elements generally and should
 * establish the site's default appearance before components
 * and utility classes are applied.
 *
 * Do NOT put reusable component styles in this file.
 * Do NOT put WPBakery or Total theme overrides here.
 */

body {
    font-family: var(--font-primary);
}
.max-width{
	max-width:var(--max-width);
	margin:0 auto;
}

h1,
h2,
h3 {
    font-family: var(--font-primary);
	letter-spacing: var(--heading-letter-spacing);
}

.text-accent,
.accent-text{
    color: var(--color-yellow-text);
}

.eyebrow{
	font-size: var(--text-md);
	font-weight:var(--font-weight-semibold);
	line-height:180%;
	text-transform:uppercase;
}

/*------------------------------------*\
  Button Colors
\*------------------------------------*/

.btn-yellow {
	background: var(--color-yellow-bg) !important;
	color: var(--color-black) !important;
	border-color: var(--color-yellow-bg) !important;
	padding:16px 32px !important;
	font-size:var(--text-md) !important;
}

.btn-black {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border-color: var(--color-black) !important;
	padding:16px 32px !important;
	font-size:var(--text-md) !important;
}


.btn-white {
	background: var(--color-white) !important;
	color: var(--color-black) !important;
	border-color: var(--color-yellow-bg) !important;
	padding:16px 32px !important;
	font-size:var(--text-md) !important;
}



/* Keep Colors on Hover / Focus
-------------------------------------*/

.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active {
	background: var(--color-yellow-bg) !important;
	color: var(--color-black) !important;
	border-color: var(--color-yellow-bg) !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border-color: var(--color-black) !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	padding:16px 32px;
	font-size:var(--text-md);
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
	background: var(--color-white) !important;
	color: var(--color-black) !important;
	border-color: var(--color-yellow-bg) !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	padding:16px 32px;
	font-size:var(--text-md);
}