:root {
	--body-header-color: #5b206d; /*See Body*/
	--banner-left-color: #5b206d; /*See Usually Body, otherwise spacer*/
	--header-color: #ff6db8;
	--header-text-color: #fff; /* Black or White */
	--banner-right-color: #ddb8e6;
	--banner-text-color: #724f96;
	--link-text-hover: #a93c01;
}

/* Calculate from https://angel-rs.github.io/css-color-filter-generator/*/
.fa{
	filter: brightness(0)
		saturate(100%) 
		invert(36%) 
		sepia(20%) 
		saturate(1340%)
		hue-rotate(227deg)
		brightness(92%) 
		contrast(91%);
}


body{
	color: var(--body-header-color);
}

a{
	color: var(--body-header-color);
}

a:hover{
	color: var(--link-text-hover);
}

header .navbar {
	background: var(--header-color);
}

header .navbar-default .navbar-nav>li>a {
	color: var(--header-text-color);
}

.banner {
	background: var(--banner-right-color);
}
.banner h2 {
	color: var(--banner-left-color);
}
.banner p {
	color: var(--banner-text-color);
}

.banner-container {
    background-color: var(--banner-right-color);
}

.default-heading h2{
	color: var(--body-header-color);
}


footer {
	background: var(--header-color);
}
footer p {
	color: var(--header-text-color);
}
footer p a { 
	color: var(--header-text-color);
}
footer p a:hover { color: var(--link-text-hover); }

footer .social a  i {
	border: 1px dashed var(--body-header-color);
}
footer .social a:hover{
	background-color: var(--banner-right-color);
}


.spacer {
    background-color: var(--banner-left-color);
}


.banner-image {
    background-color: var(--banner-left-color);
}