:root {
	--blue: #0096d6;
	--medium-blue: #005596;
	--dark-blue: #002d56;
	--purple: #491d74;
	--yellow: #fdb913;
	--green: #6d8d24;
	--red: #c4161c;
	--orange: #f3901d;
	--burnt-orange: #d9531e;
	--light-gray: #F5F5F5;
	--gray: #dcddde;
	--brand-primary: var(--blue);
	--brand-secondary: var(--yellow);
}

body,
html {
	font-family: "franklin-gothic-urw", sans-serif;
	font-size: 16px;
	margin: 0px;
	min-height: 100%;
	overflow-x: hidden;
	padding: 0px;
}

a:hover,
a:focus {
	transition: 0.2s;
	text-decoration: none;
}

.btn {
	display: inline-block;
	border-radius: 5px;
	background-color: var(--brand-primary);
	color: #fff;
	font-size: 1.15rem;
	font-weight: 600;
	padding: 10px 16px;
	color: #fff !important;
	transition: background-color 150ms ease-in-out;
}

.btn:hover {
	background-color: var(--medium-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

h1 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 15px;
	padding: 0 5px;
	text-align: center;
}

h1 .large {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 5px;
}

h2 {
	font-size: 1.875rem;
	font-weight: 600;
	margin-bottom: 20px;
	color: var(--medium-blue);
}

@media screen and (min-width: 992px) {
	h2 {
		font-size: 3.125rem;
	}
}

h3 {
	display: block;
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 20px;
}

h3.small {
	font-size: 1.5rem;
}

h3.smaller {
	font-size: 1.25rem;
}

@media screen and (min-width: 992px) {
	h3 {
		font-size: 2.25rem;
	}

	h3.small {
		font-size: 1.875rem;
	}

	h3.smaller {
		font-size: 1.5rem;
	}
}

h4 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 20px;
}

h4.small {
	font-size: 1.25rem;
}

@media screen and (min-width: 992px) {
	h4 {
		font-size: 1.875rem;
	}

	h4.small {
		font-size: 1.5rem;
	}
}

p,
li {
	font-size: 1rem;
	margin-bottom: 20px;
}

p.medium,
li.medium {
	font-size: 1.15rem;
}

p.large,
li.large {
	font-size: 1.25rem;
}

p.small,
li.small {
	font-size: 0.9rem;
}

@media screen and (min-width: 992px) {
	p,
	li {
		font-size: 1.1rem;
	}

	p.large,
	li.large {
		font-size: 1.4rem;
	}

	p.medium,
	li.medium {
		font-size: 1.25rem;
	}

	p.small,
	li.small {
		font-size: 1rem;
	}
}

ul {
	padding-left: 1.5rem;
}

li {
	margin-bottom: 5px;
}

@media screen and (min-width: 992px) {
	ul {
		padding-left: 2rem;
	}
}

hr {
	border-bottom: 1px solid #808080;
	margin: 25px 0;
}

a {
	color: var(--medium-blue);
	font-weight: 600;
	text-decoration: underline;
	transition: background-color 0.2s, color 0.2s;
}

a:hover {
	color: #014172;
}

a img {
	transition: filter 150ms ease-in-out;
}

a img:hover {
	filter: brightness(80%);
}

a.unstyled {
	font-weight: 400;
	text-decoration: none;
}

a.unstyled:hover {
	color: unset;
}

.button {
	background-color: var(--brand-primary);
	border-radius: 8px;
	border: 0;
	color: #fff;
	display: inline-block;
	letter-spacing: 0.05em;
	margin-top: 12px;
	padding: 4px 16px;
	transition: background-color 0.2s;
	text-decoration: none;
	font-size: 1.5rem;
	text-align: center;
}

.button:hover {
	color: #fff;
}

.button:focus {
	color: #fff;
}

.medium-blue-font {
	color: var(--medium-blue) !important;
}

.blue-font {
	color: var(--blue) !important;
}

.burnt-orange-font {
	color: var(--burnt-orange) !important;
}

/* Forms */
form {
	margin: 18px 0;
}

label {
	display: block;
	margin: 10px 0 8px;
	width: 100%;
}

input[type="text"] {
	margin-bottom: 8px;
	padding-left: 3px;
	width: 100%;
}

textarea {
	height: 80px;
	margin-bottom: 8px;
	padding: 3px 5px;
	resize: none;
	width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
	margin: 0 4px 0 2px;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	display: inline-block;
	margin-right: 14px;
	position: relative;
	top: -1px;
	width: auto;
}

input[type="submit"],
input[type="reset"] {
	background-color: var(--brand-primary);
	border-radius: 14px;
	border: 0;
	color: #fff;
	letter-spacing: 0.05em;
	margin-top: 14px;
	padding: 4px 16px;
	transition: background-color 0.2s;
}

.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
	background-color: var(--brand-secondary);
}

.required {
	color: #800;
}

.required span {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

/* MAIN SCREEN */
#screen {
	height: 100%;
	left: 0%;
	position: absolute;
	transition: left 0.6s;
	width: 100%;
	background-color: var(--dark-teal);
	background: linear-gradient(0deg, rgba(10, 66, 76, 0), rgba(10, 66, 76, 0)),
		url("../images/background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

#menu .logo {
	display: block;
	width: 100%;
	padding: 25px;
}

#menu .menu-upper {
	color: #fff;
}

/* LEFT MENU */
#skipcontent {
	background-color: #fff;
	border: 1px inset #aaa;
	border-radius: 8px;
	box-shadow: 2px 2px 8px 0 #333;
	color: #000;
	font-size: 1.4em;
	font-weight: 700;
	left: -9999px;
	padding: 6px 14px;
	position: absolute;
	top: -9999px;
}

#skipcontent:focus {
	left: 8px;
	top: 8px;
}

#menu {
	background-color: var(--brand-primary);
	float: left;
	height: 100%;
	overflow: auto;
	padding-bottom: 18px;
	width: 15%;
}

#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#menu ul li {
	border-bottom: 1px solid #8f9092;
	margin: 0;
	width: 100%;
}

#menu ul li a {
	color: #000;
	display: block;
	padding: 2px 8px 10px;
	position: relative;
	width: 100%;
}

#menu ul li a i {
	background-color: var(--brand-primary);
	color: #fff;
	display: inline-block;
	font-size: 1.1em;
	margin: 4px 0;
	opacity: 1;
	padding: 4px;
	position: absolute;
	text-align: center;
	transition: filer 150ms ease-in-out;
}

#menu ul li a.showing > i {
	opacity: 1;
	background-color: var(--brand-secondary);
}

#menu ul li a i:before {
	content: "\f101";
}

#menu ul li a span {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3em;
	padding: 4px 0 0 38px;
	vertical-align: middle;
}

#menu ul li a:hover {
	background-color: var(--dark-green);
}

#menu ul li a:hover i {
	filter: brightness(80%);
}

#menu ul li a.showing {
	background-color: var(--gray);
	color: #000;
}

/* TRANSLATOR */
#google_translate_element2 {
	display: none;
}

#langaugeselectcont select {
	margin-left: 5%;
	width: 90%;
}

#langaugeselectcont label {
	margin-left: 5%;
	width: 90%;
	color: #fff;
}

/* SLIDE AREA */

#slides {
	bottom: 0;
	height: 100%;
	position: relative;
	width: 100%;
}

.container {
	bottom: 74px;
	height: auto;
	left: 15%;
	margin: 0;
	position: fixed;
	top: 94px;
	transition: left 0.6s, margin 0.6s;
	width: 85%;
	padding: 0;
	max-width: none;
}

.slide {
	color: #000;
	width: 100%;
	height: 100%;
	margin-left: -1200%;
	margin-top: -22px;
	opacity: 0;
	position: absolute;
	top: -200%;
	transition: 0s;
	background-color: #fff;
	padding: 30px;
	border-radius: 8px;
}

.slide.bg-light-gray {
	background-color: #f5f5f5;
}

.bg-light-blue {
	background-color: #D9EEFF;
}

@media screen and (min-width: 992px) {
	.slide {
		padding: 45px;
	}
}

.slide.showing {
	width: 90%;
	margin-left: 0%;
	margin-top: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
	top: 0;
	transition: margin-left 0s, margin-top 0.7s, opacity 0.8s, top 0s;
	max-height: 100%;
	overflow: auto;
}

.img-full {
	width: 100%;
	height: auto;
}

.img-fill {
	width: 100%;
	height: auto;
}

@media screen and (min-width: 992px) {
	.img-fill {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.contact-open .container {
	margin-left: -390px;
}

#nav-progress {
	bottom: 0;
	height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0;
	width: 85%;
}

#nav-progress a {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	float: left;
	height: 100%;
	line-height: 62px;
	text-align: center;
	width: 10%;
}

#nav-progress > a:hover {
	background-color: #000;
}

#nav-progress a span {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

#nav-progress a i {
	font-size: 1.9em;
}

#nav-progress ul {
	display: table;
	float: left;
	height: 100%;
	margin: 0;
	padding: 0;
	width: 80%;
}

#nav-progress ul li {
	display: table-cell;
	height: 100%;
	padding: 0;
}

#nav-progress ul li a {
	background-color: var(--brand-secondary);
	border: 1px solid #222;
	border-width: 19px 2px;
	height: 100%;
	width: 100%;
}

#nav-progress ul li a.active {
	background-color: var(--brand-primary);
}

#nav-progress ul li a.active i {
	color: var(--brand-secondary);
}

#nav-progress ul li a span {
	color: #000;
	left: -9999px;
	position: absolute;
	top: -9999px;
}

#nav-progress ul li a:hover {
	border-color: #333;
}

/* MENU & COMMENT BUTTONS */
.meeting-button {
	background-color: var(--brand-secondary);
	color: #000;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 700;
	height: 60px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	width: 60px;
	text-decoration: none;
	transition: background-color 150ms ease-in-out;
}

#menu-toggle {
	display: none;
	left: 20px;
	padding-top: 8px;
	top: 14px;
	width: 60px;
	z-index: 1;
}

#menu-toggle:hover {
	color: #fff;
}

#menu-toggle span {
	background-color: #000;
	display: block;
	height: 4px;
	margin: 4px auto;
	transition: margin 0.2s, transform 0.2s;
	width: 40%;
}

#menu-toggle:hover span {
	background-color: #fff;
}

#contact {
	background-color: var(--dark-green);
	height: 100%;
	left: 100%;
	margin: 0;
	overflow-y: auto;
	padding: 12px;
	position: fixed;
	top: 0;
	transition: margin 0.6s;
	width: 370px;
}

#menuOffScreen {
	background-color: rgba(35, 35, 35, 0.3);
	cursor: pointer;
	height: 100%;
	left: -200%;
	margin-left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: left 0s ease-in-out 0.3s, margin 0s, opacity 0.3s;
	width: 100%;
	z-index: 2;
}

#closecomment {
	color: var(--brand-secondary);
	font-size: 1.2em;
	font-weight: 700;
	text-decoration: none;
}

.project-links {
	position: absolute;
	top: 20px;
	right: 5%;
	display: flex;
	align-items: center;
}

.project-links .project-btn {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	margin-right: 15px;
}

.project-links .project-btn:hover {
	filter: brightness(80%);
}

#contact-button {
	width: 84px;
	position: relative !important;
}

#contact-button i {
	font-size: 1.8em;
	padding-top: 8px;
}

.contact-open #screen {
	left: -375px;
}

.menu-open #menuOffScreen,
.contact-open #menuOffScreen {
	left: 0px;
	margin-left: -375px;
	opacity: 1;
	transition: left 0s, margin 0.6s, opacity 0.6s;
}

.menu-open #menuOffScreen {
	margin-left: 240px;
}

.contact-open #contact {
	margin-left: -370px;
}

.meeting-button:before,
.meeting-button:after {
	border: 2px solid transparent;
	content: "";
	height: 0;
	position: absolute;
	width: 0;
}

.meeting-button:before {
	left: 0;
	top: 0;
}

.meeting-button:after {
	bottom: 0;
	right: 0;
}

.meeting-button:hover {
	color: #fff;
	background-color: var(--orange);
	transition: color 0.8s;
}

.meeting-button:hover:before,
.meeting-button:hover:after {
	height: 100%;
	width: 100%;
}

.meeting-button:hover:before {
	border-right-color: #fff;
	border-top-color: #fff;
	transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}

.meeting-button:hover:after {
	border-bottom-color: #fff;
	border-left-color: #fff;
	transition: height 0.2s ease-out 0.6s, width 0.2s ease-out 0.4s;
}

/* LIGHTBOX */
#lightbox {
	height: 0;
	position: fixed;
	top: -100%;
	transition: top 0.85s, height 0.85s;
	width: 100%;
	z-index: 3;
}

#lightbox > span {
	background-color: rgba(35, 35, 35, 0.8);
	cursor: pointer;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}

#lightbox > span span {
	color: #fff;
	font-size: 3.6em;
	line-height: 0.4em;
	padding: 15px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 5;
}

#lightbox div {
	box-shadow: 0 8px 15px 0 #000;
	margin: -120px auto 0;
	max-height: 80%;
	overflow: auto;
	position: relative;
	transform: rotateX(90deg) translateY(-160px);
	transition: 0.24s;
	width: 88%;
}

#lightbox img {
	display: block;
	width: 100%;
	background-color: #fff;
}

#lightbox.on {
	top: 0;
	height: 100%;
}

#lightbox.on div {
	margin-top: 50px;
	transition: 0.8s ease-out 0.32s;
	transform: rotateX(0deg) translateY(0px);
}

.slide img.lightbox {
	cursor: pointer;
}

.slide-content {
	padding: 30px;
}

.video-container {
	position: relative;
	padding-bottom: 50%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 30px;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.icon-list {
	padding: 0;
}

.icon-list li {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.icon-list li a {
	font-weight: bold;
	text-decoration: underline;
}

.icon-list .icon {
	width: 65px;
	height: auto;
	margin-right: 25px;
}

.icon-list .text {
	flex: 1;
	font-weight: 500;
}

.accordion .accordion-button {
	padding: 12px;
	font-weight: 800;
	font-size: 1.25rem;
	border: 0;
	box-shadow: none;
	background-color: #000;
	color: #fff;
	transition: filter 150ms ease-in-out;
}

@media screen and (min-width: 992px) {
	.accordion .accordion-button {
		font-size: 1.875rem;
	}
}

.accordion .accordion-button:hover {
	filter: brightness(80%);
}

.accordion .accordion-button .icon {
	height: 62px;
	width: auto;
	margin-right: 15px;
}

.accordion .accordion-button::after {
	background-image: url("../images/icons/accordion-arrow.svg");
	height: 12px;
}

.accordion .accordion .accordion-button:not(.collapsed)::after {
	background-image: url("../images/icons/accordion-arrow.svg");
}

.accordion-button:not(.collapsed) {
	filter: brightness(80%);
}

.accordion .accordion-item {
	padding: 0px;
	margin-bottom: 20px;
	border-radius: 5px;
	overflow: hidden;
}

.project-improvements-accordion .accordion-button img {
	width: 40px;
	height: auto;
}

.accordion .accordion-item.burnt-orange .accordion-button {
	background-color: var(--burnt-orange);
}

.accordion .accordion-item.burnt-orange .main-content {
	background-color: #fbeae3;
}

.accordion .accordion-item.dark-blue .accordion-button {
	background-color: var(--dark-blue);
}

.accordion .accordion-item.dark-blue .main-content {
	background-color: #dff0ff;
}

.accordion .accordion-item.green .accordion-button {
	background-color: var(--green);
}

.accordion .accordion-item.green .main-content {
	background-color: #d5ddc2;
}

.accordion .accordion-item.orange .accordion-button {
	background-color: var(--orange);
}

.accordion .accordion-item.orange .main-content {
	background-color: #faebda;
}

.accordion .accordion-item.purple .accordion-button {
	background-color: var(--purple);
}

.accordion .accordion-item.purple .main-content {
	background-color: #f7f0fe;
}

.accordion .accordion-item.blue .accordion-button {
	background-color: var(--blue);
}

.accordion .accordion-item.blue .main-content {
	background-color: #e4f1f6;
}

.accordion .accordion-item.red .accordion-button {
	background-color: var(--red);
}

.accordion .accordion-item.red .main-content {
	background-color: #faeaeb;
}

.accordion .accordion-item.medium-blue .accordion-button {
	background-color: var(--medium-blue);
}

.accordion .accordion-item.medium-blue .main-content {
	background-color: #d9eeff;
}

.accordion .accordion-body {
	padding: 0;
}

.accordion .accordion-body .main-content {
	padding: 30px;
}

.accordion .accordion-body .form {
	padding: 30px;
	background-color: var(--light-gray);
}

.owl-carousel iframe {
	min-height: 600px !important;
}

.divider {
	display: block;
	width: 80%;
	height: 5px;
	background-color: var(--brand-primary);
	margin: 25px auto 50px;
}

.logos-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.logos-row .logo {
	width: 50%;
	height: auto;
}

.carousel-row {
	display: flex;
	flex-wrap: wrap;
}

.carousel-row > div {
	width: 50%;
}

.map-carousel h4 {
	background-color: var(--brand-secondary);
	color: #fff;
	display: block;
	padding: 20px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 2rem;
	margin-bottom: 25px;
}

.map-carousel {
	padding: 0 15px;
}

.map-carousel .owl-nav button {
	height: 100%;
	background-color: var(--medium-blue) !important;
	width: 25px;
	opacity: 70%;
	transition: opacity 300ms ease-in-out;
	position: absolute;
	top: 0;
}

@media screen and (min-width: 992px) {
	.map-carousel .owl-nav button {
		width: 35px;
	}
}

.map-carousel .owl-nav button.disabled {
	display: none;
}

.map-carousel .owl-nav button.owl-prev {
	left: -20px;
}

.map-carousel .owl-nav button.owl-next {
	right: -20px;
}

@media screen and (min-width: 992px) {
	.map-carousel .owl-nav button.owl-prev {
		left: -35px;
	}

	.map-carousel .owl-nav button.owl-next {
		right: -35px;
	}
}

.map-carousel .owl-nav button:hover {
	opacity: 100%;
}

.map-carousel .owl-nav button span {
	font-size: 4rem;
	color: #fff;
	font-weight: 700;
}

.map-carousel .owl-dot span {
	background-color: #acbdca !important;
	width: 16px !important;
	height: 16px !important;
}

.map-carousel .owl-dot.active span {
	background-color: var(--medium-blue) !important;
}

.modal .logo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 150px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

@media screen and (min-width: 992px) {
	.modal .logo {
		max-width: 200px;
	}
}

.modal .modal-title {
	font-size: 2rem;
	font-weight: 850;
	margin-bottom: 30px;
}

.modal-dialog {
	position: relative;
	margin: 10px auto;
}

.modal .btn-close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.modal .modal-content {
	padding: 0px;
}

.modal .colored-block.bg-gray img {
	max-width: 80px;
}

.modal .modal-dialog {
	width: 95%;
	max-width: 1200px;
}

.modal .modal-header {
	padding-top: 20px;
	padding-bottom: 0;
	padding-left: 20px;
	padding-right: 0;
}

.modal .modal-header,
.modal .modal-footer {
	border: 0;
}

.modal .intro-text {
	font-size: 1.25rem;
	font-weight: 700;
}

.modal .modal-body {
	max-height: 65vh;
	overflow: auto;
}

@media screen and (min-width: 992px) {
	.modal .modal-body {
		max-height: none;
		padding: 0 40px;
	}
}

.modal h2 {
	font-size: 1.5rem;
	width: 100%;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

.modal h2 .pre,
.modal h2 .post {
	display: block;
	font-size: 1.5rem;
	color: #333333;
	font-weight: 400;
}

.modal h2 .pre {
	margin-bottom: 12px;
}

.modal h2 .post {
	margin-top: 12px;
}

@media screen and (min-width: 992px) {

	.modal h2 {
		font-size: 2.75rem;
	}

	.modal h2 .pre,
	.modal h2 .post {
		font-size: 2.25rem;
	}
}

@media screen and (min-width: 992px) {
	.modal p {
		font-size: 1.25rem;
	}
}

.modal .btn {
	background-color: var(--blue);
	color: #fff;
	transition: background-color 150ms ease-in-out;
	padding: 12px 16px;
	font-size: 1.15rem;
	border: 0;
	font-weight: 600;
}

.modal .btn:hover {
	background-color: var(--dark-blue);
}

@media screen and (min-width: 992px) {
	.modal .btn {
		font-size: 1.5rem;
	}

	.modal .intro-text {
		font-size: 1.688rem;
	}

	.modal p.small {
		font-size: 1.15rem;
	}
}

.blurb {
	background-color: var(--dark-green);
	padding: 20px;
	border-radius: 8px;
}

.blurb h3,
.blurb h4 {
	color: var(--brand-secondary);
	background-color: transparent;
	padding: 0;
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 1.25rem;
	border: 0;
}

.blurb p,
.blurb li {
	color: #fff;
}

@media screen and (min-width: 992px) {
	.blurb h3,
	.blurb h4 {
		font-size: 1.563rem;
	}
}

/* MEDIA QUERIES */

@media screen and (max-width: 992px) {
	#menu {
		margin-left: -240px;
		position: relative;
		width: 240px;
		z-index: 2;
	}

	#menu-toggle {
		display: block;
	}

	.menu-open #screen {
		left: 240px;
	}

	#nav-progress {
		width: 100%;
	}

	#nav-progress a {
		width: 15%;
	}

	#nav-progress ul {
		width: 70%;
	}

	#nav-progress ul li a {
		border-width: 20px 1px;
	}

	#slides {
		height: 84%;
		top: 0;
	}

	.container {
		left: 0;
		width: 100%;
	}

	.slide {
		height: 100%;
		width: 100%;
	}

	.slide.showing {
		margin-left: 0;
	}

	.menu-open .container {
		margin-left: 240px;
	}

	#lightbox img {
		max-width: 8000%;
		width: 160%;
	}
}

#hb-panel {
	margin: 34px 0;
	padding: 0;
	position: relative;
}

#hb-panel img {
	width: 100%;
}

#hb-panel button {
	background: #82c341;
	border: 1px solid #fff;
	box-shadow: 0 4px 4px -2px #666;
	border-radius: 50%;
	font-weight: 700;
	height: 32px;
	line-height: 30px;
	width: 32px;
	text-align: center;
}

#hb-panel > div {
	left: 5%;
	position: absolute;
	top: 46%;
}

#hb-panel > div:nth-of-type(2) {
	left: 22%;
	top: 77%;
}

#hb-panel > div:nth-of-type(3) {
	left: 49%;
	top: 54%;
}

#hb-panel > div:nth-of-type(4) {
	left: 70%;
	top: 74%;
}

#hb-panel > div:nth-of-type(5) {
	left: 88%;
	top: 40%;
}

#hb-panel > div > div {
	background: #fff;
	bottom: 100%;
	box-shadow: 0 4px 4px -1px #888;
	font-size: 0.9em;
	left: -9999px;
	margin-bottom: 8px;
	opacity: 0;
	padding: 18px 18px 16px;
	position: absolute;
	transition: left 0s ease-out 0.1s, opacity 0.1s;
	width: 340px;
}

#hb-panel > div.active div {
	left: 0;
	opacity: 1;
	transition: left 0s, opacity 0.2s;
	z-index: 1;
}

#hb-panel > div.go-left > div {
	left: auto;
	right: 9999px;
}

#hb-panel > div.go-left.active > div {
	left: auto;
	right: 0;
}

#hb-panel h4 {
	border: 0;
	font-size: 1.4em;
	margin-bottom: 10px;
	padding-left: 0;
	position: relative;
}

#hb-panel h4:before {
	background: #ee1c2e;
	content: "";
	height: 12px;
	margin-top: -22px;
	position: absolute;
	width: 42px;
}

#hb-panel h4:after {
	border: 3px solid #fff;
	content: "";
	height: 18px;
	left: 12px;
	margin-top: -25px;
	position: absolute;
	top: 0;
	width: 18px;
}

#hb-panel p {
	margin: 0;
}

@media screen and (max-width: 992px) {
	#hb-panel > div > div {
		width: 260px;
	}

	#hb-panel h4 {
		font-size: 1.2em;
	}
}

@media screen and (max-width: 660px) {
	#hb-panel > div > div {
		font-size: 0.8em;
		width: 200px;
	}

	#hb-panel > div:nth-of-type(3) > div {
		left: -80px;
	}

	#hb-panel h4 {
		font-size: 1.2em;
	}
}

#menuinner {
	background-color: var(--light-gray);
}

.card {
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
}

.card .icon {
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 100%;
	height: auto;
	max-width: 150px;
}

.card p {
	color: #000 !important;
}

.card .card-title {
	font-size: 1.15rem;
	font-weight: 700;
}

.card p {
	font-size: 1rem;
}

.card *:last-child {
	margin-bottom: 0 !important;
}

.rounded {
	border-radius: 8px;
	overflow: hidden;
}

.colored-block {
	display: block;
	position: relative;
	width: 100%;
	padding: 20px;
}

.colored-block.border-top-orange {
	border-top: 28px solid var(--burnt-orange);
}

.colored-block.border-top-green {
	border-top: 28px solid var(--green);
}

.colored-block.border-top-blue {
	border-top: 28px solid var(--blue);
}

.colored-block p:last-child {
	margin-bottom: 0;
}

.colored-block.bg-light-gray {
	background-color: var(--light-gray);
}

.colored-block.bg-gray {
	background-color: #dcddde;
}

.colored-block.bg-medium-blue {
	background-color: var(--medium-blue);
}

.colored-block.bg-medium-blue * {
	color: #fff;
}

.colored-block.bg-green {
	background-color: var(--green);
}

.colored-block.bg-green * {
	color: #fff;
}

.colored-block.bg-medium-blue a:hover,
.colored-block.bg-green-blue a:hover {
	color: var(--gray) !important;
}

@media screen and (min-width: 992px) {
	.colored-block {
		padding: 40px 20px;
	}
}

.max-width-text-block {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1000px;
}

.bg-white {
	background-color: #fff;
}

#recreational-resources {
	list-style: none;
	padding: 0; 
}

#recreational-resources li {
	padding-left: 44px; 
	position: relative;
}

#recreational-resources li img {
	left: 0; 
	position: absolute;
	width: 32px;
}

@media screen and (min-width: 992px) {
	#recreational-resources li {
		padding-left: 64px;
	}

	#recreational-resources li img {
		width: 48px;
	}
}