:root {
	--pifmaker-blue: #00667F;
	--pifmaker-red: #EA563C;
	--pifmaker-dark-blue: #00333F;
	--pifmaker-medium-blue: #509AAC;
	--pifmaker-light-blue: #A0D4E0;
	--pifmaker-lightest-blue: #C9E9F0;
	--pifmaker-lightest-gray: #F5F5F5;
}



a {
	transition: color .3s;
}

/* B L U E */

.bg-blue {
	background-color: var(--pifmaker-blue);
	color: #fff;
}

.bg-blue a {
	color: var(--pifmaker-light-blue);
}

.bg-blue a:hover {
	color: #fff;
}

.bg-blue h1,
.bg-blue h2,
.bg-blue h3 {
	color: var(--pifmaker-light-blue);
}

.bg-blue .quote {
	background-image: url('/static/images/quote_blue_bottom_left.svg');
}

.bg-blue .role {
	color: var(--pifmaker-light-blue);
}




/* D A R K  B L U E */

.bg-dark-blue {
	background-color: var(--pifmaker-dark-blue);
	color: #fff;
}

.bg-dark-blue h1,
.bg-dark-blue h2,
.bg-dark-blue h3 {
	color: var(--pifmaker-light-blue);
}

.bg-dark-blue a {
	color: var(--pifmaker-light-blue);
}

.bg-dark-blue a:hover {
	color: #fff;
}


/* L I G H T  G R A Y */

.bg-light-gray {
	background-color: var(--pifmaker-lightest-gray);
	color: var(--pifmaker-blue);
}

.bg-light-gray h1,
.bg-light-gray h2,
.bg-light-gray h3 {
	color: var(--pifmaker-blue);
}


/* W H I T E */

.bg-white {
	background-color: #fff;
	color: var(--pifmaker-blue);
}

.bg-white h1,
.bg-white h2,
.bg-white h3 {
	color: var(--pifmaker-blue);
}

.bg-white a {
	color: var(--pifmaker-red);
}

.bg-white a:hover {
	color: var(--pifmaker-dark-blue);
}

.bg-white.divider,
.bg-white.content-divider > div {
	border-top-color: var(--pifmaker-light-blue);
}

.bg-white .quote {
	background-color: var(--pifmaker-lightest-gray);
}

.bg-white .role {
	color: var(--pifmaker-medium-blue);
}


.bg-white.grid {
	width: 100%;
	height: 1000%;
	background-color: #fff;
	background-image: linear-gradient(var(--pifmaker-lightest-gray) 2px, transparent 2px),linear-gradient(90deg, var(--pifmaker-lightest-gray) 2px, transparent 2px),linear-gradient(var(--pifmaker-lightest-gray) 1px, transparent 1px),linear-gradient(90deg, var(--pifmaker-lightest-gray) 1px, #fff 1px);
	background-size: 50px 50px,50px 50px,10px 10px,10px 10px;
	background-position: -2px -2px,-2px -2px,-1px -1px,-1px -1px;
}

.outside-glow-light-blue {
	box-shadow: 0 1px 3rem var(--pifmaker-light-blue);
}

.outside-glow-blue {
	box-shadow: 0 1px 3rem var(--pifmaker-blue);
}