:root {
    --darker-gray: #3E3E42;
    --dark-gray: #CAC9C9;
    --light-gray: #DBDCDB;
    --lighter-gray: #EFEFEE;
}

/* Font and colors */
body {
	color: var(--darker-gray);
}

.paragraphs h2, 
.paragraphs h3,
.paragraphs h4 {
	font-weight: 600;
    color: var(--darker-gray);
}

/* Grijstinten in design */
.sf-menu ul li:hover, .sf-menu ul li:focus {
	background-color: var(--lighter-gray);
}

section#content .content-header {
	background-color: var(--lighter-gray);
}

section#content .content-header .breadcrumb {
	color: var(--darker-gray);
}
section#content .content-header .breadcrumb>.active {
	color: var(--darker-gray);
}
.breadcrumb>.active {
    color: var(--darker-gray);
}

.aside ul#submenu li.active>a, 
.aside ul.submenu li.active>a {
    background-color: var(--lighter-gray);
}
.aside ul#submenu li a:hover, 
.aside ul.submenu li a:hover, 
.aside ul#submenu li a:focus, 
.aside ul.submenu li a:focus {
    background-color: var(--lighter-gray);
}

.fc .fc-button.fc-state-default {
	color: var(--darker-gray);
}
.fc .fc-button.fc-state-active, 
.fc .fc-button.fc-state-default:hover {
	background-color: var(--lighter-gray);
}

/* Logo in footer */

/* https://jongebaliefriesland.congressus.nl/_media/1706983/8e9452807e23425a91ab3561f6f0308c/view */
footer {
	background-image: url('https://jongebaliefriesland.congressus.nl/_media/1706983/8e9452807e23425a91ab3561f6f0308c/view');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 160px;
}

@media (min-width: 300px) {
    footer {
    	background-size: auto 190px;
    }
}

/* Donkere footer */
footer {
    background-color: var(--darker-gray);
    color: #fff;
}
footer .headline {
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.social-icons li a {
	background-color: rgba(255,255,255,.2);
}
dl.headlines.headlines-footer dd .text-muted {
	color: rgba(255,255,255,.5);
}
footer a,
dl.headlines.headlines-footer dd a {
	color: #ddd;
    color: rgba(255,255,255,.7);
}
footer a:focus,
footer a:hover,
dl.headlines.headlines-footer dd a:focus,
dl.headlines.headlines-footer dd a:hover {
	color: #fff;
}