: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 with a different border colour,
   corner radius and height than the text input beside it, so the control looks broken
   into two pieces. Align them into one seamless field. The text input's height (38.4px)
   comes from HubSpot's fixed line-height/padding/border values for .hsfc-TextInput, so
   it's matched explicitly here rather than via flex-stretch (stretch only grows shorter
   items to match taller ones, and the flag box's own padding made it the taller one). */
.hsfc-PhoneInput {
	align-items: center !important
}

.hsfc-PhoneInput__FlagAndCaret {
	box-sizing: border-box !important;
	height: 38.4px !important;
	border-color: #1f4443 !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"] {
	border-radius: 0 7px 7px 0 !important;
	margin-left: -1px !important
}