/* Basics */
body {
	font-family: var(--primary-font);
	transition: var(--transition-def) !important;
	background-color: var(--page-bg-color);
	-webkit-transition: var(--transition-def) !important;
	-moz-transition: var(--transition-def) !important;
	-ms-transition: var(--transition-def) !important;
	-o-transition: var(--transition-def) !important;
	color: var(--page-text-color);
}

/* General Stylings */
::selection {
	background: var(--highlight-bg-color);
	color: var(--highlight-text-color);
}
::-moz-selection {
	background: var(--highlight-bg-color);
	color: var(--highlight-text-color);
}
button {
	transition: var(--transition-def);
	-webkit-transition: var(--transition-def);
	-moz-transition: var(--transition-def);
	-ms-transition: var(--transition-def);
	-o-transition: var(--transition-def);
}
.br-c {
	border-radius: var(--br-def) !important;
	-webkit-border-radius: var(--br-def) !important;
	-moz-border-radius: var(--br-def) !important;
	-ms-border-radius: var(--br-def) !important;
	-o-border-radius: var(--br-def) !important;
}
.br-c .br-c, .br-c2 {
	border-radius: calc(var(--br-def) / 2);
	-webkit-border-radius: calc(var(--br-def) / 2);
	-moz-border-radius: calc(var(--br-def) / 2);
	-ms-border-radius: calc(var(--br-def) / 2);
	-o-border-radius: calc(var(--br-def) / 2);
}

/* Buttons */
.btn {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	font-weight: 600;
	border-radius: var(--br-def2) !important;
	-webkit-border-radius: var(--br-def2) !important;
	-moz-border-radius: var(--br-def2) !important;
	-ms-border-radius: var(--br-def2) !important;
	-o-border-radius: var(--br-def2) !important;
}
.btn-primary {
	background-color: var(--primary-color) !important;
	color: white !important;
}
.btn-primary:hover {
	background-color: var(--primary-hover-color) !important;
	color: white !important;
}
.btn-secondary {
	background-color: var(--secondary-color) !important;
	color: white !important;
}
.btn-secondary:hover {
	background-color: var(--secondary-hover-color) !important;
	color: white !important;
}
.btn-info {
	background-color: var(--info-color) !important;
	color: white !important;
}
.btn-info:hover {
	background-color: var(--info-hover-color) !important;
	color: white !important;
}
.btn-light {
	background-color: white !important;
	color: var(--primary-color) !important;
}
.btn-light:hover {
	background-color: rgb(224, 229, 231) !important;
	color: var(--primary-color) !important;
}

/* General Backgrounds */
.bg-trans {
	background-color: transparent;
}
.bg-primary {
	background-color: var(--primary-color) !important;
}
.bg-secondary {
	background-color: var(--secondary-color) !important;
}
.bg-info {
	background-color: var(--info-color) !important;
}
.bg-alt {
	background-color: var(--page-bg-color-alt);
}
.bg-page {
	background-color: var(--page-bg-color);
}
.gradient-bg {
	background: linear-gradient(
		-45deg,
		var(--primary-color),
		var(--page-bg-color-alt)
	);
	background-size: 400% 400%;
	animation: gradient 40s linear infinite;
	-webkit-animation: gradient 40s linear infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* General Text Formatting */
.text-cap {
	text-transform: uppercase;
}
.text-underline {
    text-decoration: underline;
}
.text-primary {
	color: var(--primary-color) !important;
}
.text-secondary {
	color: var(--secondary-color) !important;
}
.text-info {
	color: var(--info-color) !important;
}
.text-alt {
    color: var(--page-text-color-alt);
}
.fw-100 {
	font-weight: 100;
}
.fw-200 {
	font-weight: 200;
}
.fw-300 {
	font-weight: 300;
}
.fw-400 {
	font-weight: 400;
}
.fw-500 {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}
.fw-700 {
	font-weight: 700;
}
.fw-800 {
	font-weight: 800;
}
.fw-900 {
	font-weight: 900;
}
.fs-xs {
	font-size: 0.8rem;
}
.fs-sm {
	font-size: 0.9rem;
}
.fs-md {
	font-size: 1.35rem;
}
.lh-md {
	line-height: 1.4rem;
}
.fs-lg {
	font-size: 2.5rem;
}
.lh-lg {
	line-height: 2.5rem !important;
}
.fs-xl {
	font-size: 3.5rem;
}
.lh-xl {
	line-height: 3.2rem;
}
.fs-xxl {
	font-size: 10rem;
}
@media (max-width: 900px) {
	.fs-lg {
		font-size: 2rem;
	}
	.lh-lg {
		line-height: 2rem !important;
	}
	.fs-xl {
		font-size: 2.5rem;
	}
}
@media (max-width: 500px) {
	.fs-lg {
		font-size: 1.5rem;
	}
	.lh-lg {
		line-height: 1.5rem !important;
	}
	.fs-xl {
		font-size: 1.9rem;
	}
}


/* Hero */
.hero {
	background-color: var(--page-bg-color-alt);
	color: var(--page-text-color-alt);
	padding: calc(var(--nav-height) + 1rem) var(--gutter-width) 1rem var(--gutter-width);
	min-height: 15rem;
	display: flex;
	align-items: end;
	position: relative;
}
.hero h1 {
	font-size: 1.75rem;
	font-weight: 500;
	margin: 0;
	position: relative;
	z-index: +1;
}
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(120deg, rgba(var(--page-bg-color-alt-rgb),0.75) 20%, #ffffff00 100%);
}

/* Contact Page */
