:root {
	--column-gap: 2.13%;
	--column-width-multiplier: 8.333
}

.row-fluid {
	display: flex;
	flex-wrap: wrap;
	width: 100%
}

.row-fluid .span1,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9 {
	min-height: 1px;
	width: 100%
}

@media (min-width:768px) {
	.row-fluid {
		flex-wrap: nowrap;
		justify-content: space-between
	}

	.row-fluid .span1 {
		width: calc(var(--column-width-multiplier)*1%*1 - var(--column-gap)*var(--column-width-multiplier)*11/100)
	}

	.row-fluid .span2 {
		width: calc(var(--column-width-multiplier)*1%*2 - var(--column-gap)*var(--column-width-multiplier)*10/100)
	}

	.row-fluid .span3 {
		width: calc(var(--column-width-multiplier)*1%*3 - var(--column-gap)*var(--column-width-multiplier)*9/100)
	}

	.row-fluid .span4 {
		width: calc(var(--column-width-multiplier)*1%*4 - var(--column-gap)*var(--column-width-multiplier)*8/100)
	}

	.row-fluid .span5 {
		width: calc(var(--column-width-multiplier)*1%*5 - var(--column-gap)*var(--column-width-multiplier)*7/100)
	}

	.row-fluid .span6 {
		width: calc(var(--column-width-multiplier)*1%*6 - var(--column-gap)*var(--column-width-multiplier)*6/100)
	}

	.row-fluid .span7 {
		width: calc(var(--column-width-multiplier)*1%*7 - var(--column-gap)*var(--column-width-multiplier)*5/100)
	}

	.row-fluid .span8 {
		width: calc(var(--column-width-multiplier)*1%*8 - var(--column-gap)*var(--column-width-multiplier)*4/100)
	}

	.row-fluid .span9 {
		width: calc(var(--column-width-multiplier)*1%*9 - var(--column-gap)*var(--column-width-multiplier)*3/100)
	}

	.row-fluid .span10 {
		width: calc(var(--column-width-multiplier)*1%*10 - var(--column-gap)*var(--column-width-multiplier)*2/100)
	}

	.row-fluid .span11 {
		width: calc(var(--column-width-multiplier)*1%*11 - var(--column-gap)*var(--column-width-multiplier)*1/100)
	}
}

.content-wrapper {
	margin: 0 auto;

}

@media screen and (min-width:1380px) {
	.content-wrapper {
		padding: 0
	}
}

.dnd-section>.row-fluid {
	margin: 0 auto
}

.dnd-section .dnd-column {

}

@media (max-width:767px) {
	.dnd-section .dnd-column {
		padding: 0
	}
}

/* HubSpot's forms (new editor and legacy alike now render through the same "hsfc" engine)
   don't pick up the site's heading font by default - apply it to any heading rendered
   inside a form (form title/description, rich text blocks, etc). */
.hsfc-Form h1,
.hsfc-Form h2,
.hsfc-Form h3,
.hsfc-Form h4,
.hsfc-Form h5,
.hsfc-Form h6 {
	font-family: 'ivypresto-headline', serif !important
}

/* The phone field's country-code selector renders as a separate box next to the text
   input, with its own border/radius/height, so lining the two boxes up edge-to-edge
   never fully hides the seam between them (border-radius and sub-pixel rounding always
   leave a mismatch). Instead, let the text input be the single bordered pill spanning
   the full width, and float the flag/caret button on top of it (same background colour,
   no border of its own) so there's nothing to align - then pad the input's text inset
   past the button so typed digits don't sit underneath it. */
.hsfc-PhoneInput {
	position: relative !important
}

.hsfc-PhoneInput__FlagAndCaret {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1;
	box-sizing: border-box !important;
	height: 38.4px !important;
	background-color: #fafafa !important;
	border-color: #1f4443 !important;
	border-right: none !important;
	border-radius: 7px 0 0 7px !important
}

.hsfc-PhoneInput__FlagAndCaret:hover,
.hsfc-PhoneInput__FlagAndCaret:focus-visible {
	border-color: #1f4443 !important
}

.hsfc-PhoneInput input[type="tel"] {
	width: 100% !important;
	padding-left: 60px !important;
	border-radius: 7px !important;
	margin: 0 !important
}