div.container {
	box-shadow: 3px 3px 12px black;
}

div.main-body {
	margin: 0 auto;
	color: rgb(16, 27, 186);
	background-color: white;
	margin-bottom: 60px;
}

.roundedNav,
div.container {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.navPurple {
	background-color: rgb(28, 12, 55);
}
.nav-item > .nav-link {
	font-weight: bold;
	color: rgb(218, 222, 232);
}
.hero {
	position: relative;
	height: 300px;
	width: 100%;
	background-image: url(hero_small.jpg);
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
}

.hero-blurb {
	position: absolute;
	bottom: 20px;
	right: 50px;
	text-shadow: 2px 2px 10px black;
	padding-left: 24px;
}

.highlight-box.first {
	grid-area: hl-left;
}

.highlight-box.second {
	grid-area: hl-center-left;
}

.highlight-box.third {
	grid-area: hl-center-right;
}

.highlight-contact.center {
	grid-area: hl-center;
}

.highlight-box.fourth {
	grid-area: hl-right;
}

.highlight-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 20px;
	margin: 10px;
	padding-bottom: 48px;
	grid-template-areas: "hl-left hl-center-left hl-center-right hl-right";
}

.highlight-box {
	color: black;
	text-justify: inter-character;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 2px solid #eee;
	min-height:400px;
	padding: 5px;
	font-size: 16px;
	box-shadow: 2px 2px 6px rgba(87, 67, 67, 0.29);
}

.highlight-grid-contact {
	display: grid;
	grid-template-columns: 1fr 12fr 1fr;
	grid-gap: 20px;
	margin: 10px;
	margin-bottom: 48px;
	grid-template-areas: "hl-left hl-center hl-right";
}

.highlight-contact {
	color: black;
	text-justify: inter-character;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 2px solid #eee;
	min-height:400px;
	padding: 15px;
	font-size: 16px;
	box-shadow: 2px 2px 6px rgba(87, 67, 67, 0.29);
}

@media (max-width: 1024px) {
	.highlight-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"hl-left"
			"hl-center-left"
			"hl-center-right"
			"hl-right";
	}

	.page-footer {
		position: inherit;
	}
}

.verylongdiv {
	height: 11px;
}

img.logo-img {
	width: 64px;
	position: absolute;
	top: 1px;
	left: -2px;
}

span.logo-name {
	position: absolute;
	left: 28px;
	top: 11px;
	font-size: 24px;
}

a.logo-container {
	position: relative;
	height: 70px;
	width: 200px;
}
.subheading {
	position: absolute;
	font-weight: lighter;
	font-size: 12px;
	text-align: right;
	bottom: -6px;
	right: -8px;
}

h3 {
	padding-left: 5px;
	font-weight: bold;
	color: rgb(40, 26, 89);
}

.prefix {
	font-weight: lighter;

	font-size:0.9em;
	color: lightslategrey;
}