/***** Slate CSS ****/
/*
========================================================


BREAKPOINTS MOBILE / DESKTOP

========================================================
Desktop: 1920, 1440, 1366, 1280, 1024
Mobile: <1024, 768, 375, 320
........................................................

1. General Styles
2. 

*/

/*
========================================================

1.General Page Styles

========================================================
*/

div[class*="slate-container"] {
	max-width: 47.4%;
	margin: auto 0 auto 25.9%;
	display: block;
	font-family: var(--light-font);
	font-size: var(--p) !important;
	line-height: var(--line-height-p);
	color: var(--font-color);
}

.slate-container p {
	margin-bottom: 40px;
}

.slate-container .form_label p {
	margin-bottom: 0;
}

div.slate-form {
	min-height: 208px;
}

.dark-bg ::-webkit-input-placeholder {
	color: white;
}

.dark-bg ::-moz-placeholder {
	color: white;
}

.dark-bg :-ms-input-placeholder {
	color: white;
}

.dark-bg ::placeholder {
	color: white;
}

div.form_h1 .form_label {
	font-size: calc(31.25px + 0.3vw) !important;
	font-family: "TradeGothic BoldCn 20";
	font-weight: inherit;
	line-height: 1.15;
	letter-spacing: -0.1rem;
}

.slate-container button {
	font-family: "TradeGothic BoldCn 20";
	display: inline-block;
	border-radius: 0;
	padding: 10px 40px;
	white-space: initial;
	text-decoration: none;
	width: unset;
	background-color: white;
	margin-top: 1em;
	color: #800000 !important;
	text-transform: uppercase;
	border: 3px solid maroon;
	box-shadow: 0px 0px white;
	font-size: calc(16px + 0.3vw) !important;
	cursor: pointer;
}

.dark-bg .slate-container button {
	color: white !important;
	background-color: maroon;
	border-color: white;
}

.slate-container button:hover {
	color: white !important;
	background-color: maroon !important;
	border: 3px solid maroon !important;
	margin-top: 1em;
	box-shadow: 0px 0px white;
}

.dark-bg .slate-container button:hover {
	color: maroon !important;
	background-color: white !important;
}

.form_address.form_layout_stacked legend,
.form_address.form_layout_stacked input,
.form_address.form_layout_stacked select,
.form_address.form_layout_stacked textarea,
.form_location.form_layout_stacked legend,
.form_location.form_layout_stacked input,
.form_location.form_layout_stacked select,
.form_location.form_layout_stacked textarea,
.form_location_nopostal.form_layout_stacked legend,
.form_location_nopostal.form_layout_stacked input,
.form_location_nopostal.form_layout_stacked select,
.form_location_nopostal.form_layout_stacked textarea,
div.form_page input[type="password"],
div.form_page input[type="text"],
div.form_page input[type="email"],
div.form_page input[type="tel"],
div.form_page input:not([type]),
div.form_page select,
div.form_page textarea {
	margin-bottom: 5px;
	height: 40px;
	/* font-size: calc(16px + 0.3vw) !important; */
}

div.form_h2 .form_label {
	margin-top: 40px;
}

.form_container div.form_question {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

div.form_h2 .form_label,
div.form_h1 .form_label {
	margin-top: 40px;
}

div.form_page select[multiple="multiple"] {
	height: 150px;
}

div[data-required="1"] .form_label label::after {
	content: " *";
}

/* .action {
	display: none;
	margin-top: 0px !important;
} */

.onestage .action,
.onestep .action {
	display: block;
}

#form .action button,
.action-button,
.action-button:hover,
#hidden-button,
#form .default,
#ck-button,
#ck-button:visited {
	font-family: "TradeGothic BoldCn 20";
	display: inline-block;
	border-radius: 0;
	padding: 10px 40px;
	white-space: initial;
	text-decoration: none;
	width: unset;
	color: #800000;
	text-transform: uppercase;
	border: 3px solid maroon;
	cursor: pointer;
}

#ck-button,
#ck-back-button {
	margin-top: 1rem;
}

	#ck-button label,
	#ck-button-back label {
		font-size: calc(16px + 0.3vw);
		white-space: nowrap;
	}

	#ck-button:hover {
		color: white;
		background-color: maroon;
	}

.dark-bg #form .action button,
.dark-bg .action-button,
.dark-bg .action-button:hover,
.dark-bg #hidden-button,
.dark-bg #form .default,
.dark-bg #ck-button,
.dark-bg #ck-button:visited {
	color: white;
	border-color: white;
}

	.dark-bg #ck-button:hover {
		color: maroon;
		background-color: white;
	}


#ck-button-back,
#ck-button-back:visited {
	font-family: "TradeGothic BoldCn 20";
	display: inline-block;
	border-radius: 0;
	white-space: initial;
	text-decoration: none;
	width: unset;
	color: #800000;
	text-transform: uppercase;
	cursor: pointer;
}

.dark-bg #ck-button-back,
.dark-bg #ck-button-back:visited {
	color: white;
}


#form .action-button:hover,
#form .action-button:focus,
#tymessage .action-button:hover,
#tymessage .action-button:focus,
#hidden-button:hover,
#hidden-button:focus {
	color: white;
	background-color: maroon;
	border: 3px solid maroon;
	transform: none;
}

.dark-bg #form .action-button:hover,
.dark-bg #form .action-button:focus,
.dark-bg #tymessage .action-button:hover,
.dark-bg #tymessage .action-button:focus,
.dark-bg #hidden-button:hover,
.dark-bg #hidden-button:focus {
	color: maroon;
	background-color: white;
	border-color: white;
}

#hidden-button,
#exit {
	display: none;
}

#ck-button input,
#ck-button-back input {
	position: absolute;
	width: 260px;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

#ck-button-back:hover {
	box-shadow: 0 5px 0 0;
}

div.form_question.form_checkbox[data-export="sys:field:opt_in_spam"] {
	width: 100%;
	padding: 0;
}

.form_checkbox[data-export="sys:field:opt_in_spam"] fieldset {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.form_checkbox[data-export="sys:field:opt_in_spam"] .form_label {
	font-family: var(--light-font);
	/* font-size: var(--p); */
	line-height: var(--line-height-cn);
}

.form_checkbox[data-export="sys:field:opt_in_spam"] .form_responses {
	padding-right: 10px;
	padding-top: 5px;
}

.form_checkbox[data-export="sys:field:opt_in_spam"] label {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
========================================================

BreakPoints

========================================================
*/
@media screen and (min-width: 1440px) {
	div[class*="slate-container"] {
		max-width: 47.4%;
		margin: auto 0 auto 26%;
	}
}

@media screen and (min-width: 1023px) and (max-width: 1340px) {
	div[class*="slate-container"] {
		margin: auto 0 auto 25.5%;
	}
}

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

@media screen and (max-width: 1023px) {
	div[class*="slate-container"] {
		margin: auto 0 auto 20.5%;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 800px) and (orientation: landscape), only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 800px) and (orientation: landscape), only screen and (min-resolution: 120dpi) and (max-width: 800px) and (orientation: landscape), only screen and (-webkit-min-device-pixel-ratio: 1.3) and (min-device-width: 2960px) and (max-device-width: 3000px) and (orientation: landscape), only screen and (-o-min-device-pixel-ratio: 13/10) and (min-device-width: 2960px) and (max-device-width: 3000px) and (orientation: landscape), only screen and (min-resolution: 120dpi) and (min-device-width: 2960px) and (max-device-width: 3000px) and (orientation: landscape) {
	div[class*="slate-container"] {
		width: calc(100% - 40px) !important;
		max-width: 100%;
		margin: 0 20px;
	}

	div.form_h1 .form_label {
		font-size: calc(31.25px + 0.3vw) !important;
		letter-spacing: -0.05rem;
	}
}

@media screen and (max-width: 768px), only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
	div[class*="slate-container"] {
		width: calc(100% - 40px) !important;
		max-width: 100%;
		margin: 0 20px;
	}

	div.form_h1 .form_label {
		font-size: calc(16px + 4.02vw) !important;
		letter-spacing: -0.05rem;
	}
}

@media screen and (max-width: 1340px) {
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
	div[class*="slate-container"] {
		max-width: 50%;
		margin: auto 0 auto 23.5%;
		margin: 0 20px;
	}

	div.form_h1 .form_label {
		font-size: calc(16px + 4.02vw) !important;
		letter-spacing: -0.05rem;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	div[class*="slate-container"] {
		width: calc(100% - 40px) !important;
		max-width: 100%;
		margin: 0 20px;
	}

	div.form_h1 .form_label {
		font-size: calc(16px + 4.02vw) !important;
		letter-spacing: -0.05rem;
	}
}

/***** End Slate CSS ****/
/* Stylized Form */
.slate-form-style input,
.slate-form-style textarea,
.slate-form-style select {
	width: 100%;
	font-size: var(--p);
	border: 2px solid var(--main-highlight-color);
	padding: 2px;
	background-color: transparent;
	font-family: var(--cn-font);
}

.slate-form-style select {
	border-radius: 5px;
}

.slate-form-style .form_text label,
.slate-form-style .form_textarea label,
.slate-form-style .form_select label,
.slate-form-style .form_radio .form_label,
.slate-form-style .form_checkbox .form_label,
.slate-form-style div[class*="form_location"] label,
.slate-form-style div[class*="form_address"] label {
	font-family: var(--bold-cn-font);
}

.slate-form-style .form_question.form_radio label,
.slate-form-style .form_question.form_checkbox label {
	font-size: 16px;
	font-family: var(--cn-font);
}

.slate-form-style .form_question.form_radio input,
.slate-form-style .form_question.form_checkbox input {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 6px;
	padding: 0;
	appearance: none;
	background-color: transparent;
}

.slate-form-style .form_question.form_radio input {
	border-radius: 50%;
}

	.slate-form-style .form_question.form_radio input:not(:disabled):checked {
		background-color: var(--main-highlight-color);
		background-clip: content-box;
		padding: 2px;
		background-image: radial-gradient( circle, var(--main-highlight-color) 0%, var(--main-highlight-color) 50%, transparent 60%, transparent 100% );
	}

.slate-form-style .form_question.form_checkbox input:not(:disabled):checked {
	background-color: var(--main-highlight-color);
	background-clip: content-box;
	padding: 2px;
	background-image: radial-gradient( square, var(--main-highlight-color) 0%, var(--main-highlight-color) 50%, transparent 60%, transparent 100% );
}

.slate-form-style div.form_question.form_p {
	width: 100%;
}

.slate-form-style div.form_question,
.slate-form-style div.form_question[class *="form_location"] fieldset > div:not([class="form_label"]),
.slate-form-style div.form_question[class *="form_address"] fieldset > div:not([class="form_label"]) {
	width: 50%;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	padding-right: 30px;
	font-size: 16px;
}

	.slate-form-style div.form_question[class *="form_location"],
	.slate-form-style div.form_question[class *="form_address"] {
		width: 100%;
		margin-top: 20px;
		padding: 0;
	}

		.slate-form-style div.form_question.form_radio,
		.slate-form-style div.form_question.form_checkbox,
		.slate-form-style div.form_question[class *="form_location"] fieldset > div:last-of-type {
			width: 100%;
		}



/* FORM LABEL ANIMATION */
.custom-form .form_text label,
.custom-form .form_textarea label,
.custom-form .form_select label,
.custom-form .form_question label[for*="_city"],
.custom-form .form_question label[for*="_street"],
.custom-form .form_question label[for*="_postal"] {
	font-size: var(--p);
	max-width: 80%;
	cursor: text;
	transform: translate(10px, calc(100%));
	transition: all 0.2s ease;
	transform-origin: left;
}

.custom-form .form_text.filled-out label,
.custom-form .form_textarea.filled-out label,
.custom-form .form_select.filled-out label,
.custom-form .form_question .filled-out label[for*="_city"],
.custom-form .form_question .filled-out label[for*="_street"],
.custom-form .form_question .filled-out label[for*="_postal"] {
	transform: translate(0, 0) scale(.7);
}


.custom-form .mktoForm .mktoLabel {
	font-size: var(--tiny);
	max-width: 100%;
	cursor: text;
	padding-top: 0;
	transform: translate(4px, calc(100% + 5px));
	transition: all 0.2s ease;
	transform-origin: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.custom-form .mktoForm .filled-out .mktoLabel,
.custom-form .mktoForm .label-override .mktoLabel {
	transform: translate(0, 0) scale(.9);
	white-space: wrap;
}

/* Submit Button */
.dialog div.action {
	display: block !important;
}

.pageTitle .mktoForm h2 {
	margin-top: 0;
}

/* MARKETO FORM SETUP */
.marketo-form-style {
	--form-control-color: var(--main-highlight-color);
}

.marketo-form-style.dark-bg {
	--form-control-color: var(--component-background-color);
}

.marketo-form-style .mktoForm .mktoLabel {
	font-weight: normal;
	text-transform: none !important;
	font-size: var(--p);
	color: var(--font-color) !important;
}

.marketo-form-style .mktoForm .mktoField,
.marketo-form-style .mktoForm .mktoLabel {
	float: none;
}

.mktoForm .mktoRadioList > label,
.mktoForm .mktoCheckboxList > label {
	transform: translate(0, 0);
	white-space: wrap;
	font-family: var(--cn-font);
	font-size: var(--p);
	line-height: var(--line-height-cn);
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--font-color);
	margin-left: 40px;
}

.marketo-form-style .mktoForm input.mktoField[type="text"],
.marketo-form-style .mktoForm input.mktoField[type="tel"],
.marketo-form-style .mktoForm input.mktoField[type="email"],
.marketo-form-style .mktoForm textarea.mktoField,
.marketo-form-style .mktoForm select.mktoField {
	width: 100% !important;
	font-size: var(--p);
	border: 2px solid var(--main-highlight-color) !important;
	padding: 2px !important;
	background-color: var(--white) !important;
	font-family: var(--cn-font) !important;
	border-radius: 0 !important;
	margin-bottom: 10px;
}

.marketo-form-style:not(.custom-form) .mktoForm input.mktoField[type="text"],
.marketo-form-style:not(.custom-form) .mktoForm input.mktoField[type="tel"],
.marketo-form-style:not(.custom-form) .mktoForm input.mktoField[type="email"],
.marketo-form-style:not(.custom-form) .mktoForm textarea.mktoField,
.marketo-form-style:not(.custom-form) .mktoForm select.mktoField {
	margin-top: 5px;
}

.marketo-form-style .mktoForm .mktoRadioList {
	width: auto !important;
	margin-top: 10px;
}

.marketo-form-style .mktoForm input.mktoField[type="checkbox"] {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 6px;
	margin-left: 0;
	margin-top: 3px;
	padding: 0;
	appearance: none;
	background-color: white;
	border: 2px solid var(--main-highlight-color) !important;
	padding: 2px !important;
	transition: all .2s;
}

.marketo-form-style .mktoForm input.mktoField[type="radio"] {
	appearance: none;
	background-color: white;
	border: 2px solid var(--main-highlight-color) !important;
	margin-top: .2em;
  font: inherit;
  color: var(--main-highlight-color);
  width: 20px;
  height: 20px;
  border: 0.15em solid var(--main-highlight-color);
  border-radius: 50%;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
	float: left;
}

	.marketo-form-style .mktoForm input.mktoField[type="radio"]::before {
		content: "";
		width: 12px;
		height: 12px;
		border-radius: 50%;
		transform: scale(0);
		transition: 120ms transform ease-in-out;
		background-color: var(--form-control-color);
	}


	.marketo-form-style .mktoForm input.mktoField[type="radio"]:not(:disabled):checked::before {
		/* background-color: var(--main-highlight-color); */
		transform: scale(1);
	}

.marketo-form-style .mktoForm input.mktoField[type="checkbox"]:not(:disabled):checked {
	background-color: var(--form-control-color);
	box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
}

/* .marketo-form-style.dark-bg .mktoForm input.mktoField[type="checkbox"],
.marketo-form-style.dark-bg .mktoForm input.mktoField[type="radio"] { 
	border-color: var(--dark-gray);
} */

/* CHECKBOX LABLE TO THE SIDE */

.marketo-form-style .mktoForm .mktoCheckboxList {
	width: 40px !important;
	padding: 0;
}

.marketo-form-style .mktoForm select.mktoField {
	border-radius: 5px !important;
}

.marketo-form-style .mktoForm .mktoClear,
.marketo-form-style .mktoForm .mktoOffset {
	display: none;
}

.marketo-form-style .mktoForm .mktoLabel {
	width: auto !important;
	font-family: var(--bold-cn-font);
	font-weight: var(--header-font-weight) !important;
}

.marketo-form-style.cn-labels .mktoForm .mktoLabel {
	font-family: var(--cn-font);
}

.marketo-form-style .mktoForm .mktoHtmlText {
	width: 100%;
}

.marketo-form-style .mktoForm .mktoRequiredField .mktoAsterix {
	display: none;
}

.marketo-form-style fieldset.mktoFormCol {
	padding: 0 !important;
}

.marketo-form-style .mktoForm {
	color: var(--font-color);
	max-width: unset !important;
	width: 100% !important;
}

.marketo-form-style .mktoForm .mktoFormRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 20px;
}

.marketo-form-style .mktoForm .mktoFormCol {
	float: none;
}

.marketo-form-style .mktoForm .mktoFormCol {
	flex: 1;
}

.marketo-form-style .mktoHtmlText {
	width: 100% !important;
}

.marketo-form-style h1,
.marketo-form-style h2,
.marketo-form-style h3,
.marketo-form-style h4,
.marketo-form-style h5,
.marketo-form-style h6,
.marketo-form-style .h1,
.marketo-form-style .h2,
.marketo-form-style .h3,
.marketo-form-style .h4,
.marketo-form-style .h5,
.marketo-form-style .h6 {
	font-family: var(--TradeGothicBoldCn);
	font-weight: var(--header-font-weight);
	line-height: var(--line-height-h);
	letter-spacing: 0rem;
}

.marketo-form-style p strong,
.marketo-form-style td strong,
.marketo-form-style li strong {
	font-family: var(--TradeGothicBold);
	font-weight: normal !important;
}

.marketo-form-style .TGlight {
	font-family: var(--TradeGothicLight);
	line-height: var(--line-height-p);
}

.marketo-form-style .TGbold {
	font-family: var(--TradeGothicBold);
	line-height: var(--line-height-cn);
}

.marketo-form-style .TGcondensed, .optional-h1 {
	font-family: var(--TradeGothicCn);
	line-height: var(--line-height-cn);
}

.marketo-form-style .TGcondensedbold {
	font-family: var(--TradeGothicBoldCn);
	line-height: var(--line-height-cn);
}

.marketo-form-style .disclaimer {
	font-size: var(--tiny);
	line-height: var(--line-height-cn);
}

.marketo-form-style .mktoForm .mktoFieldWrap {
	float: none;
}

.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple {
	margin: 0 !important;
}

.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
	font-family: var(--TradeGothicBoldCn);
	display: inline-flex;
	border-radius: 0;
	padding: 10px 30px;
	white-space: initial;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	box-shadow: 0px 0px 0px 0px !important;
	border: 3px solid var(--main-highlight-color) !important;
	box-sizing: border-box;
	background-image: none !important;
	background-color: var(--button-color);
	color: var(--button-font-color);
	font-size: var(--tiny);
	transition: all .2s;
}

	.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover,
	.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
		background-color: var(--button-inverse);
		color: var(--button-font-inverse);
	}

	.dark-bg.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
		background-color: var(--button-inverse);
		color: var(--button-font-inverse);
	}

	.dark-bg.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover,
	.dark-bg.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
		background-color: var(--button-color);
		color: var(--button-font-color);
	}


	.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton[data-dir="prev"] {
		padding: 0;
		text-transform: none;
		border: none !important;
		box-shadow: 0 2px 0 0 var(--main-highlight-color) !important;
		font-family: var(--p-font);
		margin-left: 20px;
		color: var(--font-color);
		background: transparent;
		font-size: var(--tiny);
	}

		.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton[data-dir="prev"]:focus,
		.marketo-form-style .mktoForm .mktoButtonWrap.mktoSimple .mktoButton[data-dir="prev"]:hover {
			color: var(--main-highlight-color);
			box-shadow: var(--hover-underline-width) !important;
		}

/* Consent Input */
.marketo-form-style .mktoForm .mktoLabel#LblconsentExpress {
	transform: translate(0, 0);
	width: calc(100% - 40px) !important;
	float: right;
	white-space: wrap;
	font-family: var(--light-font);
	margin-bottom: 20px;
	padding-top: 0;
}

@media screen and (max-width: 767px) {
	.marketo-form-style .mktoForm .mktoFormCol {
		flex-basis: 50%;
	}
}
/* MULTI_STEP CSS */
.multi-step .marketo-form-container {
	position: relative;
}

.multi-step .mktoForm > .mktoFormRow,
.multi-step .mktoForm > .mktoButtonRow,
.multi-step .mktoForm > .mktoFormRow fieldset legend {
	display: none;
}

	.multi-step .mktoForm > .mktoButtonRow button[type="button"] {
		margin-right: 10px;
		margin-bottom: 10px;
	}

.multi-step #progress-bar {
	width: 50%;
	float: right;
	padding-top: 15px;
}

.multi-step form.mktoForm ~ #progress-bar {
	position: absolute;
	bottom: 14px;
	right: 0;
}

.multi-step .progress-icons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	font-size: 12px;
	letter-spacing: 0;
}

.multi-step .progress-labels {
	margin-top: 3px;
}

.multi-step .progress-icons .step {
	width: 10px;
	height: 10px;
	border: 2px solid black;
	margin: 1px;
}

	.multi-step .progress-icons .step.active {
		background: var(--maroon);
		border-color: var(--maroon);
	}

		.multi-step .progress-icons .step.active + .step-border {
			border: 2px solid var(--maroon);
		}

.multi-step .progress-icons .step-border {
	border-top: 2px dashed black;
	flex-grow: 1;
}