/* Color Variables */
:root {
	/* Main Colors */
	--colorado-red: #d91e2e;
	--colorado-red-hover: #b81926;
	--navy-blue: #163359;
	--navy-blue-hover: #0f243e;
	--bright-yellow: #f2e416;
	--bright-yellow-hover: #d9cc13;
	--vibrant-orange: #f26e22;
	--vibrant-orange-hover: #d55a14;

	/* Light Variants */
	--colorado-red-light: #e67a84;
	--colorado-red-light-hover: #d9606c;
	--navy-blue-light: #6a7d99;
	--navy-blue-light-hover: #536685;
	--bright-yellow-light: #f8f18b;
	--bright-yellow-light-hover: #f5eb6a;
	--vibrant-orange-light: #f7ab7a;
	--vibrant-orange-light-hover: #f5935a;
}

/* Colorado Red */
html .btn-colorado-red {
	background-color: var(--colorado-red);
	border-color: var(--colorado-red);
	color: #fff;
}

html .btn-colorado-red:hover,
html .btn-colorado-red.hover {
	background-color: var(--colorado-red-hover);
	border-color: var(--colorado-red-hover);
	color: #fff;
}

html .btn-colorado-red:focus,
html .btn-colorado-red.focus {
	box-shadow: 0 0 0 3px rgba(217, 30, 46, 0.5);
	background-color: var(--colorado-red);
	border-color: var(--colorado-red);
}

html .btn-colorado-red.disabled,
html .btn-colorado-red:disabled {
	background-color: var(--colorado-red);
	border-color: var(--colorado-red);
	opacity: 0.65;
}

html .heading-colorado-red,
html .lnk-colorado-red,
html .text-color-colorado-red,
html .text-colorado-red {
	color: var(--colorado-red) !important;
}

html .text-color-hover-colorado-red:hover,
html .text-hover-colorado-red:hover {
	color: var(--colorado-red) !important;
}

html .bg-colorado-red,
html .background-color-colorado-red {
	background-color: var(--colorado-red) !important;
}

.badge-colorado-red {
	background: var(--colorado-red-hover);
	color: #fff;
}

/* Colorado Red Light */
html .btn-colorado-red-light {
	background-color: var(--colorado-red-light);
	border-color: var(--colorado-red-light);
	color: #fff;
}

html .btn-colorado-red-light:hover,
html .btn-colorado-red-light.hover {
	background-color: var(--colorado-red-light-hover);
	border-color: var(--colorado-red-light-hover);
	color: #fff;
}

html .btn-colorado-red-light:focus,
html .btn-colorado-red-light.focus {
	box-shadow: 0 0 0 3px rgba(230, 122, 132, 0.5);
	background-color: var(--colorado-red-light);
	border-color: var(--colorado-red-light);
}

html .btn-colorado-red-light.disabled,
html .btn-colorado-red-light:disabled {
	background-color: var(--colorado-red-light);
	border-color: var(--colorado-red-light);
	opacity: 0.65;
}

html .heading-colorado-red-light,
html .lnk-colorado-red-light,
html .text-color-colorado-red-light,
html .text-colorado-red-light {
	color: var(--colorado-red-light) !important;
}

html .text-color-hover-colorado-red-light:hover,
html .text-hover-colorado-red-light:hover {
	color: var(--colorado-red-light) !important;
}

html .bg-colorado-red-light,
html .background-color-colorado-red-light {
	background-color: var(--colorado-red-light) !important;
}

.badge-colorado-red-light {
	background: var(--colorado-red-light-hover);
	color: #fff;
}

/* Navy Blue */
html .btn-navy-blue {
	background-color: var(--navy-blue);
	border-color: var(--navy-blue);
	color: #fff;
}

html .btn-navy-blue:hover,
html .btn-navy-blue.hover {
	background-color: var(--navy-blue-hover);
	border-color: var(--navy-blue-hover);
	color: #fff;
}

html .btn-navy-blue:focus,
html .btn-navy-blue.focus {
	box-shadow: 0 0 0 3px rgba(22, 51, 89, 0.5);
	background-color: var(--navy-blue);
	border-color: var(--navy-blue);
}

html .btn-navy-blue.disabled,
html .btn-navy-blue:disabled {
	background-color: var(--navy-blue);
	border-color: var(--navy-blue);
	opacity: 0.65;
}

html .heading-navy-blue,
html .lnk-navy-blue,
html .text-color-navy-blue,
html .text-navy-blue {
	color: var(--navy-blue) !important;
}

html .text-color-hover-navy-blue:hover,
html .text-hover-navy-blue:hover {
	color: var(--navy-blue) !important;
}

html .bg-navy-blue,
html .background-color-navy-blue {
	background-color: var(--navy-blue) !important;
}

.badge-navy-blue {
	background: var(--navy-blue-hover);
	color: #fff;
}

/* Navy Blue Light */
html .btn-navy-blue-light {
	background-color: var(--navy-blue-light);
	border-color: var(--navy-blue-light);
	color: #fff;
}

html .btn-navy-blue-light:hover,
html .btn-navy-blue-light.hover {
	background-color: var(--navy-blue-light-hover);
	border-color: var(--navy-blue-light-hover);
	color: #fff;
}

html .btn-navy-blue-light:focus,
html .btn-navy-blue-light.focus {
	box-shadow: 0 0 0 3px rgba(106, 125, 153, 0.5);
	background-color: var(--navy-blue-light);
	border-color: var(--navy-blue-light);
}

html .btn-navy-blue-light.disabled,
html .btn-navy-blue-light:disabled {
	background-color: var(--navy-blue-light);
	border-color: var(--navy-blue-light);
	opacity: 0.65;
}

html .heading-navy-blue-light,
html .lnk-navy-blue-light,
html .text-color-navy-blue-light,
html .text-navy-blue-light {
	color: var(--navy-blue-light) !important;
}

html .text-color-hover-navy-blue-light:hover,
html .text-hover-navy-blue-light:hover {
	color: var(--navy-blue-light) !important;
}

html .bg-navy-blue-light,
html .background-color-navy-blue-light {
	background-color: var(--navy-blue-light) !important;
}

.badge-navy-blue-light {
	background: var(--navy-blue-light-hover);
	color: #fff;
}

/* Bright Yellow */
html .btn-bright-yellow {
	background-color: var(--bright-yellow);
	border-color: var(--bright-yellow);
	color: #333;
}

html .btn-bright-yellow:hover,
html .btn-bright-yellow.hover {
	background-color: var(--bright-yellow-hover);
	border-color: var(--bright-yellow-hover);
	color: #333;
}

html .btn-bright-yellow:focus,
html .btn-bright-yellow.focus {
	box-shadow: 0 0 0 3px rgba(242, 228, 22, 0.5);
	background-color: var(--bright-yellow);
	border-color: var(--bright-yellow);
}

html .btn-bright-yellow.disabled,
html .btn-bright-yellow:disabled {
	background-color: var(--bright-yellow);
	border-color: var(--bright-yellow);
	opacity: 0.65;
}

html .heading-bright-yellow,
html .lnk-bright-yellow,
html .text-color-bright-yellow,
html .text-bright-yellow {
	color: var(--bright-yellow) !important;
}

html .text-color-hover-bright-yellow:hover,
html .text-hover-bright-yellow:hover {
	color: var(--bright-yellow) !important;
}

html .bg-bright-yellow,
html .background-color-bright-yellow {
	background-color: var(--bright-yellow) !important;
}

.badge-bright-yellow {
	background: var(--bright-yellow-hover);
	color: #333;
}

/* Bright Yellow Light */
html .btn-bright-yellow-light {
	background-color: var(--bright-yellow-light);
	border-color: var(--bright-yellow-light);
	color: #333;
}

html .btn-bright-yellow-light:hover,
html .btn-bright-yellow-light.hover {
	background-color: var(--bright-yellow-light-hover);
	border-color: var(--bright-yellow-light-hover);
	color: #333;
}

html .btn-bright-yellow-light:focus,
html .btn-bright-yellow-light.focus {
	box-shadow: 0 0 0 3px rgba(248, 241, 139, 0.5);
	background-color: var(--bright-yellow-light);
	border-color: var(--bright-yellow-light);
}

html .btn-bright-yellow-light.disabled,
html .btn-bright-yellow-light:disabled {
	background-color: var(--bright-yellow-light);
	border-color: var(--bright-yellow-light);
	opacity: 0.65;
}

html .heading-bright-yellow-light,
html .lnk-bright-yellow-light,
html .text-color-bright-yellow-light,
html .text-bright-yellow-light {
	color: var(--bright-yellow-hover) !important;
}

html .text-color-hover-bright-yellow-light:hover,
html .text-hover-bright-yellow-light:hover {
	color: var(--bright-yellow-hover) !important;
}

html .bg-bright-yellow-light,
html .background-color-bright-yellow-light {
	background-color: var(--bright-yellow-light) !important;
}

.badge-bright-yellow-light {
	background: var(--bright-yellow-light-hover);
	color: #333;
}

/* Vibrant Orange */
html .btn-vibrant-orange {
	background-color: var(--vibrant-orange);
	border-color: var(--vibrant-orange);
	color: #fff;
}

html .btn-vibrant-orange:hover,
html .btn-vibrant-orange.hover {
	background-color: var(--vibrant-orange-hover);
	border-color: var(--vibrant-orange-hover);
	color: #fff;
}

html .btn-vibrant-orange:focus,
html .btn-vibrant-orange.focus {
	box-shadow: 0 0 0 3px rgba(242, 110, 34, 0.5);
	background-color: var(--vibrant-orange);
	border-color: var(--vibrant-orange);
}

html .btn-vibrant-orange.disabled,
html .btn-vibrant-orange:disabled {
	background-color: var(--vibrant-orange);
	border-color: var(--vibrant-orange);
	opacity: 0.65;
}

html .heading-vibrant-orange,
html .lnk-vibrant-orange,
html .text-color-vibrant-orange,
html .text-vibrant-orange {
	color: var(--vibrant-orange) !important;
}

html .text-color-hover-vibrant-orange:hover,
html .text-hover-vibrant-orange:hover {
	color: var(--vibrant-orange) !important;
}

html .bg-vibrant-orange,
html .background-color-vibrant-orange {
	background-color: var(--vibrant-orange) !important;
}

.badge-vibrant-orange {
	background: var(--vibrant-orange-hover);
	color: #fff;
}

/* Vibrant Orange Light */
html .btn-vibrant-orange-light {
	background-color: var(--vibrant-orange-light);
	border-color: var(--vibrant-orange-light);
	color: #333;
}

html .btn-vibrant-orange-light:hover,
html .btn-vibrant-orange-light.hover {
	background-color: var(--vibrant-orange-light-hover);
	border-color: var(--vibrant-orange-light-hover);
	color: #333;
}

html .btn-vibrant-orange-light:focus,
html .btn-vibrant-orange-light.focus {
	box-shadow: 0 0 0 3px rgba(247, 171, 122, 0.5);
	background-color: var(--vibrant-orange-light);
	border-color: var(--vibrant-orange-light);
}

html .btn-vibrant-orange-light.disabled,
html .btn-vibrant-orange-light:disabled {
	background-color: var(--vibrant-orange-light);
	border-color: var(--vibrant-orange-light);
	opacity: 0.65;
}

html .heading-vibrant-orange-light,
html .lnk-vibrant-orange-light,
html .text-color-vibrant-orange-light,
html .text-vibrant-orange-light {
	color: var(--vibrant-orange) !important;
}

html .text-color-hover-vibrant-orange-light:hover,
html .text-hover-vibrant-orange-light:hover {
	color: var(--vibrant-orange) !important;
}

html .bg-vibrant-orange-light,
html .background-color-vibrant-orange-light {
	background-color: var(--vibrant-orange-light) !important;
}

.badge-vibrant-orange-light {
	background: var(--vibrant-orange-light-hover);
	color: #333;
}

/* Button Outline Styles */

/* Colorado Red Outline */
html .btn-outline-colorado-red {
	color: var(--colorado-red);
	background-color: transparent;
	background-image: none;
	border-color: var(--colorado-red);
}

html .btn-outline-colorado-red:hover,
html .btn-outline-colorado-red.hover {
	color: #fff;
	background-color: var(--colorado-red);
	border-color: var(--colorado-red);
}

html .btn-outline-colorado-red:focus,
html .btn-outline-colorado-red.focus {
	box-shadow: 0 0 0 3px rgba(217, 30, 46, 0.5);
}

html .btn-outline-colorado-red.disabled,
html .btn-outline-colorado-red:disabled {
	color: var(--colorado-red);
	background-color: transparent;
	border-color: var(--colorado-red);
	opacity: 0.65;
}

html .btn-outline-colorado-red:not(:disabled):not(.disabled):active,
html .btn-outline-colorado-red:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: var(--colorado-red);
	border-color: var(--colorado-red);
}

/* Colorado Red Light Outline */
html .btn-outline-colorado-red-light {
	color: var(--colorado-red);
	background-color: transparent;
	background-image: none;
	border-color: var(--colorado-red-light);
}

html .btn-outline-colorado-red-light:hover,
html .btn-outline-colorado-red-light.hover {
	color: #fff;
	background-color: var(--colorado-red-light);
	border-color: var(--colorado-red-light);
}

html .btn-outline-colorado-red-light:focus,
html .btn-outline-colorado-red-light.focus {
	box-shadow: 0 0 0 3px rgba(230, 122, 132, 0.5);
}

html .btn-outline-colorado-red-light.disabled,
html .btn-outline-colorado-red-light:disabled {
	color: var(--colorado-red);
	background-color: transparent;
	border-color: var(--colorado-red-light);
	opacity: 0.65;
}

html .btn-outline-colorado-red-light:not(:disabled):not(.disabled):active,
html .btn-outline-colorado-red-light:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: var(--colorado-red-light);
	border-color: var(--colorado-red-light);
}

/* Navy Blue Outline */
html .btn-outline-navy-blue {
	color: var(--navy-blue);
	background-color: transparent;
	background-image: none;
	border-color: var(--navy-blue);
}

html .btn-outline-navy-blue:hover,
html .btn-outline-navy-blue.hover {
	color: #fff;
	background-color: var(--navy-blue);
	border-color: var(--navy-blue);
}

html .btn-outline-navy-blue:focus,
html .btn-outline-navy-blue.focus {
	box-shadow: 0 0 0 3px rgba(22, 51, 89, 0.5);
}

html .btn-outline-navy-blue.disabled,
html .btn-outline-navy-blue:disabled {
	color: var(--navy-blue);
	background-color: transparent;
	border-color: var(--navy-blue);
	opacity: 0.65;
}

html .btn-outline-navy-blue:not(:disabled):not(.disabled):active,
html .btn-outline-navy-blue:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: var(--navy-blue);
	border-color: var(--navy-blue);
}

/* Navy Blue Light Outline */
html .btn-outline-navy-blue-light {
	color: var(--navy-blue);
	background-color: transparent;
	background-image: none;
	border-color: var(--navy-blue-light);
}

html .btn-outline-navy-blue-light:hover,
html .btn-outline-navy-blue-light.hover {
	color: #fff;
	background-color: var(--navy-blue-light);
	border-color: var(--navy-blue-light);
}

html .btn-outline-navy-blue-light:focus,
html .btn-outline-navy-blue-light.focus {
	box-shadow: 0 0 0 3px rgba(106, 125, 153, 0.5);
}

html .btn-outline-navy-blue-light.disabled,
html .btn-outline-navy-blue-light:disabled {
	color: var(--navy-blue);
	background-color: transparent;
	border-color: var(--navy-blue-light);
	opacity: 0.65;
}

html .btn-outline-navy-blue-light:not(:disabled):not(.disabled):active,
html .btn-outline-navy-blue-light:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: var(--navy-blue-light);
	border-color: var(--navy-blue-light);
}

/* Bright Yellow Outline */
html .btn-outline-bright-yellow {
	color: var(--bright-yellow-hover);
	background-color: transparent;
	background-image: none;
	border-color: var(--bright-yellow);
}

html .btn-outline-bright-yellow:hover,
html .btn-outline-bright-yellow.hover {
	color: #333;
	background-color: var(--bright-yellow);
	border-color: var(--bright-yellow);
}

html .btn-outline-bright-yellow:focus,
html .btn-outline-bright-yellow.focus {
	box-shadow: 0 0 0 3px rgba(242, 228, 22, 0.5);
}

html .btn-outline-bright-yellow.disabled,
html .btn-outline-bright-yellow:disabled {
	color: var(--bright-yellow-hover);
	background-color: transparent;
	border-color: var(--bright-yellow);
	opacity: 0.65;
}

html .btn-outline-bright-yellow:not(:disabled):not(.disabled):active,
html .btn-outline-bright-yellow:not(:disabled):not(.disabled).active {
	color: #333;
	background-color: var(--bright-yellow);
	border-color: var(--bright-yellow);
}

/* Bright Yellow Light Outline */
html .btn-outline-bright-yellow-light {
	color: var(--bright-yellow-hover);
	background-color: transparent;
	background-image: none;
	border-color: var(--bright-yellow-light);
}

html .btn-outline-bright-yellow-light:hover,
html .btn-outline-bright-yellow-light.hover {
	color: #333;
	background-color: var(--bright-yellow-light);
	border-color: var(--bright-yellow-light);
}

html .btn-outline-bright-yellow-light:focus,
html .btn-outline-bright-yellow-light.focus {
	box-shadow: 0 0 0 3px rgba(248, 241, 139, 0.5);
}

html .btn-outline-bright-yellow-light.disabled,
html .btn-outline-bright-yellow-light:disabled {
	color: var(--bright-yellow-hover);
	background-color: transparent;
	border-color: var(--bright-yellow-light);
	opacity: 0.65;
}

html .btn-outline-bright-yellow-light:not(:disabled):not(.disabled):active,
html .btn-outline-bright-yellow-light:not(:disabled):not(.disabled).active {
	color: #333;
	background-color: var(--bright-yellow-light);
	border-color: var(--bright-yellow-light);
}

/* Vibrant Orange Outline */
html .btn-outline-vibrant-orange {
	color: var(--vibrant-orange);
	background-color: transparent;
	background-image: none;
	border-color: var(--vibrant-orange);
}

html .btn-outline-vibrant-orange:hover,
html .btn-outline-vibrant-orange.hover {
	color: #fff;
	background-color: var(--vibrant-orange);
	border-color: var(--vibrant-orange);
}

html .btn-outline-vibrant-orange:focus,
html .btn-outline-vibrant-orange.focus {
	box-shadow: 0 0 0 3px rgba(242, 110, 34, 0.5);
}

html .btn-outline-vibrant-orange.disabled,
html .btn-outline-vibrant-orange:disabled {
	color: var(--vibrant-orange);
	background-color: transparent;
	border-color: var(--vibrant-orange);
	opacity: 0.65;
}

html .btn-outline-vibrant-orange:not(:disabled):not(.disabled):active,
html .btn-outline-vibrant-orange:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: var(--vibrant-orange);
	border-color: var(--vibrant-orange);
}

/* Vibrant Orange Light Outline */
html .btn-outline-vibrant-orange-light {
	color: var(--vibrant-orange);
	background-color: transparent;
	background-image: none;
	border-color: var(--vibrant-orange-light);
}

html .btn-outline-vibrant-orange-light:hover,
html .btn-outline-vibrant-orange-light.hover {
	color: #333;
	background-color: var(--vibrant-orange-light);
	border-color: var(--vibrant-orange-light);
}

html .btn-outline-vibrant-orange-light:focus,
html .btn-outline-vibrant-orange-light.focus {
	box-shadow: 0 0 0 3px rgba(247, 171, 122, 0.5);
}

html .btn-outline-vibrant-orange-light.disabled,
html .btn-outline-vibrant-orange-light:disabled {
	color: var(--vibrant-orange);
	background-color: transparent;
	border-color: var(--vibrant-orange-light);
	opacity: 0.65;
}

html .btn-outline-vibrant-orange-light:not(:disabled):not(.disabled):active,
html .btn-outline-vibrant-orange-light:not(:disabled):not(.disabled).active {
	color: #333;
	background-color: var(--vibrant-orange-light);
	border-color: var(--vibrant-orange-light);
}