@import url(https://use.typekit.net/tjt5ooy.css);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap);

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated-short {
	-webkit-animation-duration: 0s;
	animation-duration: 0s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}

}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}

}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0)
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0)
	}

}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0)
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0)
	}

}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}

@-webkit-keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(2)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}

}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(2)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}

}

.scaleIn {
	-webkit-animation-name: scaleIn;
	animation-name: scaleIn
}

.delay-00s {
	animation-delay: .1s;
	-webkit-animation-delay: .1s
}

.delay-01s {
	animation-delay: .1s;
	-webkit-animation-delay: .1s
}

.delay-02s {
	animation-delay: .2s;
	-webkit-animation-delay: .2s
}

.delay-03s {
	animation-delay: .3s;
	-webkit-animation-delay: .3s
}

.delay-04s {
	animation-delay: .4s;
	-webkit-animation-delay: .4s
}

.delay-05s {
	animation-delay: .5s;
	-webkit-animation-delay: .5s
}

.delay-06s {
	animation-delay: .6s;
	-webkit-animation-delay: .6s
}

.delay-07s {
	animation-delay: .7s;
	-webkit-animation-delay: .7s
}

.delay-08s {
	animation-delay: .8s;
	-webkit-animation-delay: .8s
}

.delay-09s {
	animation-delay: .9s;
	-webkit-animation-delay: .9s
}

.delay-10s {
	animation-delay: 1s;
	-webkit-animation-delay: 1s
}

.delay-11s {
	animation-delay: 1.1s;
	-webkit-animation-delay: 1.1s
}

.delay-12s {
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s
}

.delay-13s {
	animation-delay: 1.3s;
	-webkit-animation-delay: 1.3s
}

.delay-14s {
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s
}

.delay-15s {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s
}

.delay-16s {
	animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s
}

.delay-17s {
	animation-delay: 1.7s;
	-webkit-animation-delay: 1.7s
}

.delay-18s {
	animation-delay: 1.8s;
	-webkit-animation-delay: 1.8s
}

.delay-19s {
	animation-delay: 1.9s;
	-webkit-animation-delay: 1.9s
}

.delay-20s {
	animation-delay: 2s;
	-webkit-animation-delay: 2s
}

.delay-21s {
	animation-delay: 2.1s;
	-webkit-animation-delay: 2.1s
}

.delay-22s {
	animation-delay: 2.2s;
	-webkit-animation-delay: 2.2s
}

.delay-23s {
	animation-delay: 2.3s;
	-webkit-animation-delay: 2.3s
}

.delay-24s {
	animation-delay: 2.4s;
	-webkit-animation-delay: 2.4s
}

.delay-25s {
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s
}

.delay-26s {
	animation-delay: 2.6s;
	-webkit-animation-delay: 2.6s
}

.delay-27s {
	animation-delay: 2.7s;
	-webkit-animation-delay: 2.7s
}

.delay-28s {
	animation-delay: 2.8s;
	-webkit-animation-delay: 2.8s
}

.delay-29s {
	animation-delay: 2.9s;
	-webkit-animation-delay: 2.9s
}

.delay-30s {
	animation-delay: 3s;
	-webkit-animation-delay: 3s
}

.delay-31s {
	animation-delay: 3.1s;
	-webkit-animation-delay: 3.1s
}

.delay-32s {
	animation-delay: 3.2s;
	-webkit-animation-delay: 3.2s
}

.delay-33s {
	animation-delay: 3.3s;
	-webkit-animation-delay: 3.3s
}

.delay-34s {
	animation-delay: 3.4s;
	-webkit-animation-delay: 3.4s
}

.delay-35s {
	animation-delay: 3.5s;
	-webkit-animation-delay: 3.5s
}

.delay-36s {
	animation-delay: 3.6s;
	-webkit-animation-delay: 3.6s
}

.delay-37s {
	animation-delay: 3.7s;
	-webkit-animation-delay: 3.7s
}

.delay-38s {
	animation-delay: 3.8s;
	-webkit-animation-delay: 3.8s
}

.delay-39s {
	animation-delay: 3.9s;
	-webkit-animation-delay: 3.9s
}

.delay-40s {
	animation-delay: 4s;
	-webkit-animation-delay: 4s
}

.delay-41s {
	animation-delay: 4.1s;
	-webkit-animation-delay: 4.1s
}

.delay-42s {
	animation-delay: 4.2s;
	-webkit-animation-delay: 4.2s
}

.delay-43s {
	animation-delay: 4.3s;
	-webkit-animation-delay: 4.3s
}

.delay-44s {
	animation-delay: 4.4s;
	-webkit-animation-delay: 4.4s
}

.delay-45s {
	animation-delay: 4.5s;
	-webkit-animation-delay: 4.5s
}

.delay-46s {
	animation-delay: 4.6s;
	-webkit-animation-delay: 4.6s
}

.delay-47s {
	animation-delay: 4.7s;
	-webkit-animation-delay: 4.7s
}

.delay-48s {
	animation-delay: 4.8s;
	-webkit-animation-delay: 4.8s
}

.delay-49s {
	animation-delay: 4.9s;
	-webkit-animation-delay: 4.9s
}

.delay-50s {
	animation-delay: 5s;
	-webkit-animation-delay: 5s
}

.delay-51s {
	animation-delay: 5.1s;
	-webkit-animation-delay: 5.1s
}

.delay-52s {
	animation-delay: 5.2s;
	-webkit-animation-delay: 5.2s
}

.delay-53s {
	animation-delay: 5.3s;
	-webkit-animation-delay: 5.3s
}

.delay-54s {
	animation-delay: 5.4s;
	-webkit-animation-delay: 5.4s
}

.delay-55s {
	animation-delay: 5.5s;
	-webkit-animation-delay: 5.5s
}

.delay-56s {
	animation-delay: 5.6s;
	-webkit-animation-delay: 5.6s
}

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: sans-serif
}

body {
	background-color: #fff;
	font-family: "Arial", sans-serif;
	margin: 0;
	padding: 0
}

:root {
	--boma-color-gray: #454546;
	--boma-color-gray-light: #ccc;
	--boma-color-blue: #007b97;
	--boma-color-blue-light: #00b0e1;
	--boma-color-maroon: #c40257;
	--boma-color-orange: #d36326;
	--primary-font: Arial, sans-serif;
	--header-font: europa, sans-serif;
	--hero-font: Montserrat, sans-serif;
	--body-font: europa, sans-serif
}

.callout .callout-inner p, .button, header div p.dates, header div p.location, h2, h1 {
	font-family: var(--header-font);
	font-weight: 700;
	font-style: normal
}

.hero h1 {
	font-family: var(--hero-font);
	font-weight: 700;
	font-style: normal
}

p {
	line-height: 180%
}

h1 {
	transition: all .2s ease-in-out;
	color: var(--boma-color-blue);
	font-size: clamp(2rem, 3.6vw, 6rem);
	margin: 0;
	position: relative;
	z-index: 1
}

h2 {
	color: var(--boma-color-blue-light);
	font-size: clamp(2rem, 3vw, 5rem);
	font-weight: 300;
	margin: 0
}

header {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1180px;
	padding: 4px 0 6px;
	transition: all
}

@media screen and (min-width:768px) {
	header {
		gap: 10em;
		flex-direction: row
	}

}

header a {
	flex: 1;
	padding: 10px 20px
}

header a img {
	max-width: 300px;
	width: 300px
}

@media screen and (min-width:768px) {
	header a img {
		max-width: 400px
	}

}

header div {
	border-right: 0;
	flex: 1;
	padding-right: 0;
	margin-right: 0
}

@media screen and (min-width:768px) {
	header div {
		border-right: 2px solid var(--boma-color-orange);
		text-align: right;
		margin-right: 30px;
		padding-right: 10px
	}

}

header div p {
	margin: 0;
	text-align: center
}

@media screen and (min-width:768px) {
	header div p {
		text-align: right
	}

}

header div p.location {
	color: var(--boma-color-orange);
	font-size: x-large;
	font-style: normal
}

header div p.dates {
	color: gray;
	font-size: large;
	font-weight: 400;
	transform: translateY(-4px)
}

.hero {
	max-height: 640px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%
}

.hero h1 {
	color: var(--boma-color-blue);
	font-weight: 400;
	position: relative;
	transform: translateY(40px);
	z-index: 4
}

@media screen and (min-width:768px) {
	.hero h1 {
		transform: translateY(0)
	}

}

.hero .people {
	bottom: 0;
	left: -50%;
	margin-left: 50%;
	height: 100%;
	max-width: 800px;
	position: absolute;
	width: 100%;
	z-index: 1
}

@media screen and (min-width:768px) {
	.hero .people {
		left: -400px
	}

}

.hero .people div.left {
	bottom: -10px;
	left: -70px;
	margin: auto;
	position: absolute;
	z-index: 3
}

@media screen and (min-width:768px) {
	.hero .people div.left {
		left: 20px
	}

}

.hero .people div.left img {
	filter: drop-shadow(0px 44px 10px rgba(0, 0, 0, 0.3));
	max-width: 400px
}

@media screen and (min-width:768px) {
	.hero .people div.left img {
		max-width: 500px
	}

}

.hero .people div.left.titles {
	left: 10px;
	width: 140px
}

@media screen and (min-width:768px) {
	.hero .people div.left.titles {
		left: 40px;
		width: 300px
	}

}

.hero .people div.left.titles p {
	background-color: rgba(0, 0, 0, .6);
	bottom: 20px;
	color: #fff;
	font-size: 10px;
	line-height: 1.4;
	padding: 10px;
	position: absolute;
	width: 100%;
	z-index: 1
}

@media screen and (min-width:768px) {
	.hero .people div.left.titles p {
		bottom: 60px;
		font-size: medium
	}

}

.hero .people div.right {
	bottom: -10px;
	margin: auto;
	position: absolute;
	right: -100px;
	z-index: 2
}

@media screen and (min-width:768px) {
	.hero .people div.right {
		right: 10px
	}

}

.hero .people div.right img {
	filter: drop-shadow(0px 44px 10px rgba(0, 0, 0, 0.3));
	max-width: 340px
}

@media screen and (min-width:768px) {
	.hero .people div.right img {
		max-width: 420px
	}

}

.hero .people div.right.titles {
	right: 30px;
	width: 140px
}

@media screen and (min-width:768px) {
	.hero .people div.right.titles {
		right: 50px;
		width: 300px
	}

}

.hero .people div.right.titles p {
	background-color: rgba(0, 0, 0, .6);
	bottom: 20px;
	color: #fff;
	font-size: 10px;
	line-height: 1.4;
	padding: 10px;
	position: absolute;
	width: 100%;
	z-index: 1
}

@media screen and (min-width:768px) {
	.hero .people div.right.titles p {
		bottom: 60px;
		font-size: medium
	}

}

.hero .bg {
	margin-left: 50%;
	max-height: 700px;
	position: relative;
	transform: translateY(-100px);
	transition: opacity;
	left: -995px
}

.button {
	transition: all .2s ease-in-out;
	background-color: var(--boma-color-orange);
	color: #fff;
	display: block;
	font-size: clamp(1rem, 1.4vw, 4.5em);
	margin: 30px auto;
	max-width: 200px;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none
}

@media screen and (min-width:768px) {
	.button {
		max-width: 300px;
		padding: 20px
	}

}

.button:hover {
	background-color: #ff763f;
	transform: scale(1.02)
}

.button.blue {
	background-color: var(--boma-color-blue)
}

.button.blue:hover {
	background-color: var(--boma-color-blue-light);
	transform: scale(1.02)
}

.button.orange {
	background-color: var(--boma-color-orange)
}

.button.orange:hover {
	background-color: #ff763f;
	transform: scale(1.02)
}

.content {
	margin: 20px auto 0;
	max-width: 1150px;
	padding: 40px
}

.content h2 {
	font-size: clamp(3.4rem, 2vw, 4.5em)
}

.benefit-holder {
	display: flex;
	flex-direction: column;
	background-color: var(--boma-color-blue)
}

.benefit-holder .benefit-inner {
	margin: 30px auto 20px;
	max-width: 1150px;
	padding: 40px
}

@media screen and (min-width:768px) {
	.benefit-holder .benefit-inner {
		flex-direction: row
	}

}

.benefit-holder .benefit-inner h2 {
	color: var(--boma-color-blue-light);
	font-weight: 700;
	text-align: center
}

.benefit-holder .benefit-inner p {
	color: #fff
}

.benefit-holder .benefit-inner .benefits {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap
}

.benefit-holder .benefit-inner .benefits .benefit {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-start;
	min-width: 200px;
	padding: 20px
}

@media screen and (min-width:768px) {
	.benefit-holder .benefit-inner .benefits .benefit {
		min-width: auto
	}

}

.benefit-holder .benefit-inner .benefits .benefit h3 {
	color: #fff;
	font-size: small;
	text-align: center
}

.benefit-holder .benefit-inner .benefits .benefit .icon {
	background-color: var(--boma-color-blue-light);
	border-radius: 100%;
	height: 110px;
	display: flex;
	justify-content: center;
	width: 110px
}

.benefit-holder .benefit-inner .benefits .benefit .icon img {
	max-width: 70px
}

.callout {
	background-color: var(--boma-color-gray);
	width: 100%
}

.callout .callout-inner {
	margin: 0 auto;
	max-width: 900px;
	padding: 40px
}

.callout .callout-inner p {
	color: #fff;
	font-size: clamp(4rem, 2vw, 4.5em);
	font-weight: 300;
	line-height: 120%;
	margin: 0;
	text-align: center
}

.callout .callout-inner p a {
	color: var(--boma-color-blue);
	text-decoration: underline;
	font-weight: 700;
	font-size: clamp(1.6rem, 2vw, 4.5em)
}

.callout .callout-inner p a:hover {
	color: var(--boma-color-blue-light);
	text-decoration: none
}

.grid-holder {
	display: flex;
	flex-direction: column
}

.grid-holder .grid-inner {
	margin: 0 auto;
	max-width: 1150px
}

@media screen and (min-width:768px) {
	.grid-holder .grid-inner {
		flex-direction: row
	}

}

.grid-holder .grid-inner h2 {
	color: var(--boma-color-blue-light);
	font-weight: 700;
	text-align: center
}

.grid-holder .grid-inner p {
	color: #000
}

.grid-holder .grid-inner .grids {
	display: flex;
	flex-direction: column;
	justify-content: center
}

.grid-holder .grid-inner .grids .grid {
	align-items: flex-start;
	display: flex;
	flex-basis: 50%;
	flex-direction: column;
	justify-content: center;
	padding: 0
}

@media screen and (min-width:768px) {
	.grid-holder .grid-inner .grids .grid {
		flex-direction: row;
		justify-content: flex-start
	}

}

.grid-holder .grid-inner .grids .grid:nth-of-type(2n) {
	flex-direction: column
}

@media screen and (min-width:768px) {
	.grid-holder .grid-inner .grids .grid:nth-of-type(2n) {
		flex-direction: row-reverse;
		justify-content: flex-start
	}

}

.grid-holder .grid-inner .grids .grid .img-solid {
	display: flex;
	flex: 1;
	height: 500px;
	justify-content: center;
	overflow: hidden
}

.grid-holder .grid-inner .grids .grid .img-solid img {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: 900px
}

.grid-holder .grid-inner .grids .grid .copy {
	flex: .862;
	padding: 40px;
	text-align: center
}

@media screen and (min-width:768px) {
	.grid-holder .grid-inner .grids .grid .copy {
		text-align: left
	}

}

.grid-holder .grid-inner .grids .grid .copy b {
	font-size: large
}

.grid-holder .grid-inner .grids .grid .copy h4 {
	color: var(--boma-color-blue-light);
	font-weight: 700;
	font-size: clamp(2.4rem, 2vw, 4.5em);
	margin-bottom: 0;
	margin-top: 0
}

@media screen and (min-width:768px) {
	.grid-holder .grid-inner .grids .grid .copy h4 {
		margin-top: 50px
	}

}

.grid-holder .grid-inner .grids .grid .copy a {
	margin: 10px auto 0
}

@media screen and (min-width:768px) {
	.grid-holder .grid-inner .grids .grid .copy a {
		margin: 30px 0 0
	}

}

footer {
	background-color: var(--boma-color-blue);
	padding: 40px;
}

footer * {
	font-size: small;
}

footer .inner-footer {
	display: flex;
	flex-direction: column;
	max-width: 1150px;
	margin: auto;
	gap: 2em;
}

@media screen and (min-width:768px) {
	footer .inner-footer {
		flex-direction: row;
	}
}

footer .inner-footer div {
	flex: 1;
}

footer p, footer a, footer h4 {
	color: white;
	margin: 0;
}

footer h3 {
	color: rgba(255, 255, 255, .4);
	font-size: large;
}

footer ul {
	line-height: 1.2;
	padding: 0;
}

footer ul li {
	list-style: none;
	padding: 12px 0;
	color: white;
}

footer img {
	width: 100%
}

.footer-logo {
	max-width: 200px;
}

.boma_footer {
	font-size: small;
	margin: auto;
	max-width: 1150px;
	padding: 20px;
}

@media screen and (min-width:768px) {
	.boma_footer {
		padding: 20px 0;
	}
}

.boma_footer a {
	font-weight: bold;
	color: var(--boma-color-blue);
}

.social {
	display: flex;
	gap: .6em;
	margin-top: 0;
}

.social li a {
	font-size: 30px;
}

/*# sourceMappingURL=main.css.map*/