:root {
	--lightgrey: rgb(203,212,223);
	--darkgrey: rgb(82,86,103);
	--shadedgrey: rgb(223, 230, 238);
	--shadedgrey-40: rgba(223, 230, 238, 0.4);
}
body, html {
	height: 100%;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
}
body {
	min-height: 100vh;
	color: var(--darkgrey);
	overflow: hidden;
}
.wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
}
h1,h2,h3,h4,h5,h6,.heading {
	text-transform: uppercase;
	font-family: 'Big Shoulders Display', cursive;
}
.clickable {
	cursor: pointer;
}
.border {
	border-color: var(--lightgrey);
}
a.shaded {
	background-color: var(--shadedgrey);
	color: var(--darkgrey)!important;
	font-weight: 600;
	text-decoration: none;
	font-size: 1.3rem;
}
.grow-on-hover {
	transition: transform 200ms linear;
}
.clickable:hover .grow-on-hover {
	transform: scale(1.1);
}
a.shaded:hover {
	background-color: var(--darkgrey);
	color: var(--lightgrey)!important;;
}
.shaded-light-back {
	background-color: var(--shadedgrey-40);
}
.anchored-rondel {
	position: absolute;
	right: -0.33rem;
    height: 4rem;
    top: -0.6rem;
}

/* Parallax Shapes **/
header {
	position: relative;
	min-height: 500px;
}
.shape0 {
	position: relative;
	width: 100%;
}
.shape1 {
	position: absolute;
	top: 0;
	width: 100%;
}
.shape2 {
	position: absolute;
	top: 0;
	width: 100%;
}
.shape3 {
	position: absolute;
	top: 0;
	width: 100%;
}
.btn-communal {
	background-color: white;
	font-size: 1.1rem;
	text-transform: uppercase;
	font-family: 'Big Shoulders Display', cursive;
}
.btn-communal:hover {
	color: white;
	background-color: var(--darkgrey);
}