.btn {
    text-decoration: none;
	font-weight: normal;
	font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
	font-family: inherit;
	background: var(--gray);
	color: var(--white);
	padding: 12px 14px;
	box-sizing: border-box;
    display: inline-block;
	letter-spacing: 0;
	border-radius: 0;
	border: 1px solid var(--gray);
	outline: none;
	transition: all 400ms;
}
@media (hover: hover) {
	.btn:hover {
		color: var(--white);
		background: var(--light-gray);
		border-color: var(--light-gray);
		transition: all 400ms;
	}
}

.btn.btn-primary {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}
@media (hover: hover) {
	.btn.btn-primary:hover {
		background: var(--brand-primary-accent);
		border-color: var(--brand-primary-accent);
	}
}

.btn.btn-primary.btn-outline {
	background-color: white;
    border-color: var(--brand-primary);
    color: var(--brand-primary)
}
@media (hover: hover) {
	.btn.btn-primary.btn-outline:hover {
		background-color:  var(--brand-primary);
		border-color: var(--brand-primary);
		color: white;
	}
}

.btn.btn-secondary {
	background: var(--brand-secondary);
	border-color: var(--brand-secondary);
}
@media (hover: hover) {
	.btn.btn-secondary:hover {
		background: var(--brand-secondary-accent);
		border-color: var(--brand-secondary-accent);
	}
}