/*
	========================================
	v3.5 'alpaca' - last updated SB 2023.01.27
	========================================
*/

/*
	========================================
	Normalize + Reset
	========================================
*/

*, *::before, *::after 		{ box-sizing: border-box; }
html 						{ font-size: 100%; line-height: 1.7; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* prevent adjustments of font size after orientation changes */
html, body 					{ margin: 0; padding: 0; }
main 						{ display: block; }
h1, h2, h3, h4, h5, h6, p, a 		{ overflow-wrap: break-word; } /* avoid text overflows */
img, picture, video, canvas, svg	{ display: block; max-width: 100%; } /* for assets to not be able to exceed their container */
pre, code 					{ font-family: monospace, monospace; font-size: 1em; } /* correct the inheritance and scaling of font size in all browsers; correct the odd em font sizing in all browsers. */
sub, sup 					{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } /* prevent sub and sup elements from affecting the line height in all browsers. */
sub 						{ bottom: -0.25em; }
sup 						{ top: -0.5em; }

/*
	========================================
	Base
	========================================
*/

body 						{ background: #fff; color: #3D3F42; font-family: 'Noto Sans', Arial, Helvetica, sans-serif; -webkit-font-smoothing: subpixel-antialiased; }
.contain 					{ max-width: 830px; }
.wrap-inner 				{ margin: 0 auto; max-width: 660px; padding: 0 1.25rem; width: 100%; }

@media screen and (min-width: 60em) {
	.wrap-inner 			{ max-width: 1150px; }
	.wrap-inner--lg-only 	{ margin: 0 auto; max-width: 1150px; padding: 0 1.25rem; width: 100%; }
	.wrap-inner--sm-only 	{ max-width: unset; padding: 0; }
	.wrap-inner--sm-static 	{ max-width: 660px; }
}

.footer .wrap-inner-footer 	{ margin: 0 auto; max-width: 1280px; padding: 0 .625rem; width: 100%; }

/*
	========================================
	Typography
	element - desktop - (tablet) - mobile
	h1 - 38/54 - (34/49) - 28/40
	h2 - 30/45 - (28/42) - 24/36
	h3 - 24/36 - 20/32
	h4 - 20/33 - 18/28
	h5 - 18/28 - 16/25
	label - 14/23
	privacy statement - 12/18
	body - 16/27
	========================================
*/

h1, h2, h3, h4, h5, p 	{ margin: 0 0 .625rem; 					}
ul, ol 					{ margin: .625rem 1.25rem; padding: 0; 	}
li 						{ margin: .3125rem 0; 					}
ol ol, ol ol ol,
ul ul, ul ul ul			{ margin-left: 2rem; }
ol ol 					{ list-style-type: lower-alpha; }
ol ol ol 				{ list-style-type: lower-roman; }

h1 						{ font-weight: 300; }
h2, h3, h4, h5, label  	{ font-weight: 400; }
b, strong 				{ font-weight: 700; }
hr 						{ border: none; height: .0625rem; }
span 					{ font-size: inherit; line-height: inherit; }

h1, .h1 				{ font-size: 1.75rem; 	line-height: 1.43; 	}
h2, .h2 				{ font-size: 1.5rem; 	line-height: 1.5; 	}
h3, .h3 				{ font-size: 1.25rem; 	line-height: 1.6; 	}
h4, .h4 				{ font-size: 1.125rem; 	line-height: 1.56; 	}
h5, .h5 				{ font-size: 1rem; 		line-height: 1.55; 	}
p, li 					{ font-size: 1rem;		line-height: 1.7;	}
small, .label, .small 	{ font-size: .875rem;	line-height: 1.64;	}

/* 780 */
@media screen and (min-width: 48.75em)  {
	h1, .h1 			{ font-size: 2.125rem; }
	h2, .h2 			{ font-size: 1.75rem;  }
	h3, .h3 			{ font-size: 1.5rem; 	line-height: 1.5; 	}
	h4, .h4 			{ font-size: 1.25rem; 	line-height: 1.65; 	}
	h5, .h5 			{ font-size: 1.125rem; }
}

/* 960 */
@media screen and (min-width: 60em)  {
	h1, .h1 			{ font-size: 2.375rem; }
	h2, .h2 			{ font-size: 1.875rem; }
}

a 										{ border-bottom: 1px solid transparent; color: #2D62B7; font-weight: 700; text-decoration: none; }
a:hover, a:focus, a:active, a:visited 	{ border-bottom-color: inherit; }

header li,
header ul,
footer li,
footer ul,
nav li,
nav ul,
.reset,
.reset li 				{ list-style-type: none; margin: 0; padding: 0; }

/* white text */
.txt-w, .txt-w a 		{ color: #fff; 		}
.txt-w .btn-white a 	{ color: #3D3F42; 	}

/*
	=========================================
	Sticky Footer
	=========================================

	Assumed Markup:

	<body>
		<div class="sf___wrap">
			<div class="sf___inner"></div>
			<footer></footer>
		</div>
	</body>
*/

.sf___wrap 		{ display: flex; flex-direction: column; min-height: 100vh; }
.sf___inner 	{ flex: 1 0 auto; }

/*
	========================================
	Utility + Toggles
	========================================
*/

.clearfix:before, .clearfix:after 				{ content: " "; display: table; }
.clearfix:after 								{ clear: both; }
.ctr 											{ text-align: center; }
.hide 											{ display: none; }

@media screen and (min-width: 60em) {
	.btn.formlink___wrap 						{ display: none !important; }
}

/* one toggle that controls img or video; toggle-no-asset if neither is desired */
.toggle-ctrl-img,
.toggle-ctrl-video,
.toggle-no-asset .toggle-ctrl-img,
.toggle-no-asset .toggle-ctrl-video,
.toggle-no-asset .toggle-img-on.toggle-ctrl-img,
.toggle-no-asset .toggle-video-on.toggle-ctrl-video { display: none; }

.toggle-img-on.toggle-ctrl-img,
.toggle-video-on.toggle-ctrl-video 					{ display: block; }

/*
	========================================
	Embedded Videos
	========================================
*/

.video 											{ height: 0; margin: 0; max-width: 100%; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0; position: relative; }
.video iframe, .video object, .video embed 		{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
	========================================
	Header
	========================================
*/

.header 										{ display: inline-flex; }
.header___logo img 								{ display: block; height: 22px; margin: 0; max-width: 100%; }
.header___logo a 								{ border: 0; }

/*
	========================================
	Footer
	========================================
*/

.footer 										{ background: #002F56; padding: 1.25rem 0; }
.footer li 										{ display: inline-block; }
.footer nav 									{ align-items: center; text-align: center; }
.footer nav,
.footer___links 								{ display: flex; flex-flow: column; gap: .625rem; }
.footer___logo 									{ flex-shrink: 0; margin: .625rem 0; }
.footer___logo img 								{ display: block; height: 22px; margin: 0; max-width: 100%; }
.footer___legal li  							{ margin: .3125rem 0; }
.footer___legal li:not(:last-child):after 		{ content: "|"; margin: 0 .3125rem; vertical-align: top; }
.footer___legal li:nth-last-of-type(2):after 	{ content: ""; }
.footer___social 								{ align-items: center; display: inline-flex; justify-content: center; }
.footer___social li 							{ margin: .3125rem .5rem; }
.footer___social svg 							{ vertical-align: middle; }

@media (min-width: 45.44em) {
	.footer___legal li:nth-last-of-type(2):after { content: "|"; }	
}

@media (min-width: 48.75em) {
	.footer nav 								{ flex-flow: row; gap: 2rem; justify-content: space-between; }
	.footer___links 							{ text-align: right; gap: .3125rem; }
	.footer___social 							{ justify-content: right; margin-top: .3125rem; }
}

/*
	========================================
	Hero BG
	========================================
*/

.hero___bg 										{ background-position: top left; background-repeat: no-repeat; background-size: cover; }

/*
	=========================================
	Btns

	Assumed Markup:

	<div class="btn btn-primary">
		<a></a>
	</div>
	=========================================
*/

.btn 								{ margin: 1.25rem 0 0; }
.hero .btn 							{ margin-bottom: 1.25rem; }
.btn a {
	align-items: center;
	border: 0;
	border-radius: 5px;
	box-shadow: 0 2px 2px 0 rgba(39,41,42,0.25);
	display: inline-flex;
	margin: 0 auto; 
	min-height: 40px;
	padding: 0 20px;
	text-align: center;
	transition: all 300ms ease-in-out;
}
.btn a:hover,
.btn a:focus,
.btn a:active 						{ box-shadow: 0 2px 4px 2px rgba(39,41,42,0.3); cursor: pointer; }
.btn a div 							{ color: inherit; } /* fix mkto color on div elements */

/* disco */
.btn-primary a 						{ background-color: #B41782; border: none; color: #fff; }
.btn-primary a:hover,
.btn-primary a:focus,
.btn-primary a:active 				{ background-color: #901268; }

.btn-primary--reverse a 			{ background-color: #fff; border: 1px solid #B41782; color: #B41782; }
.btn-primary--reverse a:hover,
.btn-primary--reverse a:focus,
.btn-primary--reverse a:active 		{ background-color: #901268; border-color: #901268; color: #fff; }

/* mblue */
.btn-secondary a 					{ background-color: #3E75CF; border: none; color: #fff; }
.btn-secondary a:hover,
.btn-secondary a:focus,
.btn-secondary a:active 			{ background-color: #2F589B; }

.btn-secondary--reverse a 			{ background-color: #fff; border: 1px solid #3E75CF; color: #3E75CF; }
.btn-secondary--reverse a:hover,
.btn-secondary--reverse a:focus,
.btn-secondary--reverse a:active 	{ background-color: #2F589B; border-color: #2F589B; color: #fff; }

/* lagoon */
.btn-tertiary a 					{ background-color: #00758D; border: none; color: #fff; }
.btn-tertiary a:hover,
.btn-tertiary a:focus,
.btn-tertiary a:active 				{ background-color: #00586A; }

.btn-tertiary--reverse a 			{ background-color: #fff; border: 1px solid #00758D; color: #00758D; }
.btn-tertiary--reverse a:hover,
.btn-tertiary--reverse a:focus,
.btn-tertiary--reverse a:active 	{ background-color: #00586A; border-color: #00586A; color: #fff; }

/* opaque */
.btn-opaque a 						{ background-color: rgba(255,255,255,0.15); border: 1px solid #fff; color: #fff; }
.btn-opaque a:hover,
.btn-opaque a:focus,
.btn-opaque a:active 				{ background-color: rgba(255,255,255,0.9); color: #3D3F42; }

/* white */
.btn-white a 						{ background-color: #fff; border: none; color: #3D3F42; }
.btn-white a:hover,
.btn-white a:focus,
.btn-white a:active 				{ text-decoration: underline; }

/* movelist */
.btn-novelist a 					{ background-color: #E47708; border: none; color: #fff; font-weight: 700; font-size: 19px; line-height: 1.4; }
.btn-novelist a:hover,
.btn-novelist a:focus,
.btn-novelist a:active 				{ background-color: #BD6207; }

.btn-novelist--reverse a 			{ background-color: #fff; border: 1px solid #E47708; color: #E47708; font-weight: 700; font-size: 19px; line-height: 1.4; }
.btn-novelist--reverse a:hover,
.btn-novelist--reverse a:focus,
.btn-novelist--reverse a:active 	{ background-color: #BD6207; border-color: #BD6207; color: #fff; }

/*
	========================================
	HR + Color Bar

	Assumed Markup:

	<div class="hr-full-color"></div>
	========================================
*/

hr {
	background: #D7D8DA;
}
.hr-full-color {
	height: 40px;
	background-image:
		linear-gradient(
			to right, 
			#3E75CF,
			#3E75CF 53%,
			#002F56 53%,
			#002F56 83%,
			#B2C8EC 83%
		);
}

/*
	========================================
	Mktoforms

	Single column form, with turtle submit button, full-width inputs
	2022-12-28 - SB
	========================================
*/

/* reset */
button, input { overflow: visible; } /* show the overflow in Edge. */
button, select { text-transform: none; /* remove the inheritance of text transform in Firefox, Edge */ }
button, [type="button"], [type="submit"] { -webkit-appearance: button; } /* correct the inability to style clickable types in iOS and Safari. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /* remove the inner border and padding in Firefox. */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /* restore the focus styles unset by the previous rule. */

/* base */
.mktoForm { padding: 0 !important; } /* override unusual padding at mobile */

/* width of form and form elements */
form.mktoForm { margin: 0 auto; width: 100% !important; }
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol,
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap,
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap input,
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap select,
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap textarea,
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap .mktoHtmlText,
form.mktoForm .mktoFormRow .mktoFormCol .mktoFieldWrap .mktoHtmlText { width: 100% !important; }
form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap label { width: auto !important; } /* override inline width added in mkto form editor*/

/* typography */
/* note - optin is 14px/1.64 */
.mktoForm strong, .mktoForm em { padding: 0 !important; }
.mktoForm .mktoFormRow,
.mktoForm .mktoFormCol .mktoLabel,
.mktoForm .mktoFormRow select.mktoField,
.mktoForm .mktoFormRow input[type],
.mktoForm .mktoFormRow textarea.mktoField { font: normal 16px/1.7 "Noto Sans","Open Sans",Arial,sans-serif !important; }

/* remove line-height on mktoFieldWrap, as this adds extra spacing beneath textarea */
.mktoFieldDescriptor { line-height: 0 !important; }

/* typography colors */
.mktoForm .mktoFormRow,
.mktoForm .mktoFormCol .mktoLabel { color: #3d3f42; }
.mktoForm .mktoFormRow input[type],
.mktoForm .mktoFormRow textarea.mktoField { color: #3d3f42; }
.mktoForm .mktoFormRow select.mktoField { color: #7a7f85; }

/* white typography override - note - optin uses this */
#white .mktoForm .mktoFormRow,
#white .mktoForm .mktoFormCol .mktoLabel,
#white .mktoForm .mktoFormRow .privacy_statement, #white .mktoForm .form_terms { color: #fff !important; }
#white .mktoForm .mktoFormRow .privacy_statement a, #white .mktoForm .form_terms a { color: #fff !important; }

/* condensing mktoRows */
.mktoForm .mktoFormCol .mktoOffset { height: 1em; width: 0 !important; }

/* privacy statement, form terms */
/* note - optin is 11px/1.5 plus margin: .5em 0; */
.mktoForm .mktoFormRow .privacy_statement,
.mktoForm .mktoFormRow .form_terms { color: #3d3f42; font: normal 12px/1.5 "Noto Sans","Open Sans",Arial,sans-serif !important; display: block; }
.mktoForm .mktoFormRow .privacy_statement a,
.mktoForm .mktoFormRow .form_terms a { border-bottom: 1px solid transparent !important; color: #2D62B7; font-weight: bold !important; padding: 0 !important; text-decoration: none; }
.mktoForm .mktoFormRow .privacy_statement a:hover,
.mktoForm .mktoFormRow .privacy_statement a:active,
.mktoForm .mktoFormRow .privacy_statement a:focus,
.mktoForm .mktoFormRow .form_terms a:hover,
.mktoForm .mktoFormRow .form_terms a:active,
.mktoForm .mktoFormRow .form_terms a:focus { border-bottom-color: inherit !important; }

/* labels */
.mktoForm .mktoRequiredField label.mktoLabel,
.mktoForm .mktoFieldWrap label.mktoLabel,
.mktoForm .mktoFormCol .mktoLabel { font-weight: normal; margin-bottom: 0.1875em; }
.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix, .mktoForm .mktoAsterix { display: none; }

/* submit button */
.mktoForm div.mktoButtonRow .mktoButtonWrap { margin-left: 0 !important; } /* overwrite unusual margin-left:120px and/or 10px on this element */
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow:0 2px 2px 0 rgba(39,41,42,0.25); box-shadow:0 2px 2px 0 rgba(39,41,42,0.25); cursor: pointer; font: bold 16px/1.7 "Noto Sans","Open Sans",Arial,sans-serif !important; margin: 0; min-height: 40px; padding: 0 20px; -webkit-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; width: auto; }

/* turtle submit button colors */
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton { background-image: none !important; background: #1D7F58 !important; border: 0; color: #fff; }
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:hover,
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:active { border: 0; }
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:hover,
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:active,
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:focus { background: #186A4A !important; -webkit-box-shadow:0 2px 4px 2px rgba(39,41,42,0.35); box-shadow:0 2px 4px 2px rgba(39,41,42,0.35); color: #fff; text-decoration: none; }

/* opaque button colors override - note - optin uses this*/
#white .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton { background: rgba(255,255,255,.15); border: 1px solid #fff; }
#white .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:hover,
#white .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:active,
#white .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:focus { background: rgba(255,255,255,0.9); border: 1px solid #fff; color: #3D3F42; }

/* inputs, selects, textarea */
.mktoForm .mktoFormRow input[type],
.mktoForm .mktoFormRow select.mktoField,
.mktoForm .mktoFormRow textarea.mktoField { background-color: #fff; border: 1px solid #B8BBBF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

/* inputs and selects */
.mktoForm .mktoFormRow input[type],
.mktoForm .mktoFormRow select.mktoField { height: 40px !important; line-height: 32px !important; padding: 0 .75em !important; }

/* textarea format */
.mktoForm .mktoFormRow textarea.mktoField { height: auto; overflow: auto; padding: .5em .75em !important; }

/* row spacing */
/* note - optin is .5em */
.mktoForm .mktoFormRow .mktoFormCol { margin-bottom: 1em !important; }

/* checkboxes and radios */
form.mktoForm .mktoRadioList, form.mktoForm .mktoCheckboxList { padding: 0; }
.mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList { width: 100% !important; } /* ensure checkbox/radio list items are on next line */
.mktoForm .mktoFormRow .mktoRadioList > label, .mktoForm .mktoFormRow .mktoCheckboxList > label { margin: 0 2em 1em; } /* 28px = 18px width of input + 10px actual spacing */
.mktoForm .mktoFormRow .mktoRadioList > label:last-child, .mktoForm .mktoFormRow .mktoCheckboxList > label:last-child { margin-bottom: 0 !important; }
.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap input[type="checkbox"],
.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap input[type="radio"] { border: unset !important;cursor: pointer; height: 1.125em !important; width: 1.125em !important; } /* 1.125 = 18/14px */
.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap input[type="checkbox"] + label,
.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap input[type="radio"] + label { line-height: 1.125em; }

/* focus outline */
.mktoForm .mktoFormRow input[type]:focus,
.mktoForm .mktoFormRow textarea.mktoField:focus,
.mktoForm .mktoFormRow select.mktoField:focus,
.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:focus { outline: 2px solid #3e75cf !important; }

/* select dropdown */
.mktoForm .mktoFormRow select.mktoField {
	-webkit-appearance: unset;
	-moz-appearance: unset;
	appearance: unset;
	cursor: pointer;
	background: #fff url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' viewBox='0 0 320 512'><path d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z' fill='%23B8BBBF'></path></svg>");
	background-size: 16px auto;
	background-position: calc(100% - 16px) center;
	background-repeat: no-repeat;
	cursor: pointer;
	margin: 0;
}
.mktoForm .mktoFormRow select.mktoField::-ms-expand { display: none; }

/* error color  */
.mktoForm .mktoFormRow .mktoError .mktoErrorMsg,
.mktoForm .mktoFormRow .mktoError .mktoErrorArrow { background-color: #E83030; border-color: #E83030; background-image: none; -webkit-box-shadow:0 2px 2px 0 rgba(39,41,42,0.25); box-shadow:0 2px 2px 0 rgba(39,41,42,0.25); text-shadow: none; }

/* error message arrow and phrase */
/*.mktoForm .mktoFormRow .mktoError .mktoErrorArrowWrap { display: none; }*/ /* note - optin uses this */
.mktoForm .mktoFormRow .mktoError .mktoErrorMsg { padding: 0 5px !important; }

/*
	========================================
	Form Embedded Success Msg
	========================================
*/

.container-form___success-msg #confirmform 								{ background: #EFEFEF; border-radius: 8px; margin-top: 1.875rem; padding: 1rem; }
.container-form___success-msg hr 										{ display: none; }
@media screen and (min-width: 60em) {
	.page-lp-template-wb .container-form___success-msg #confirmform 	{ margin-top: 0; }
}

/*
	========================================
	Template = page-lp-template-tys
	========================================
*/

.wrap-page-flex-ctr .header 			{ display: block; }
.wrap-page-flex-ctr .header img 		{ height: 25px; margin: 3.125rem auto; }
.wrap-page-flex-ctr .header.left 		{ display: inline-flex; }
.wrap-page-flex-ctr .header.left img 	{ margin-bottom: 0; }

.wrap-page-flex-ctr .main {
	align-items: center;
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin: 4.375rem 0;
	min-height: 30vh;
	text-align: center;
}
.wrap-page-flex-ctr .main h1 			{ margin-bottom: 1.875rem; }


/*
	========================================
	Template = page-lp-template-ff

	dev notes -
		unique template layout
		not a traditional grid, due to hero bg being directly controlled by amount of hero content
		instead, overlapping grids, with a fallback stack
	========================================
*/

/* img */
.page-lp-template-ff .container-asset img 						{ border-radius: 8px; }
/* card */
.page-lp-template-ff .card 										{ background: #fff; border-radius: 8px; }

/* asset option w text */
.page-lp-template-ff .container-asset___text 					{ margin-top: 1.875rem; }
.page-lp-template-ff .toggle-no-asset .container-asset___text 	{ margin-top: 0; }

/* vertical rhythm */
.page-lp-template-ff .header 									{ padding: 3.125rem 0 2.5rem; }
.page-lp-template-ff .container-form 							{ margin-bottom: 0; padding-bottom: 1.875rem; }

/* vertical rhythm w overlapping container */
/* with foreground asset */
.page-lp-template-ff .pull-overlap-hero 						{ padding-bottom: 6.5rem; }
.page-lp-template-ff .push-overlap-hero							{ margin-top: -7.5rem; }
/* without foreground asset */
.page-lp-template-ff .toggle-no-asset .pull-overlap-hero 		{ padding-bottom: 1.875rem;	}
.page-lp-template-ff .toggle-no-asset .push-overlap-hero 		{ margin-top: 0; }

@media screen and (min-width: 60em) {
	.page-lp-template-ff .pull-overlap-hero,
	.page-lp-template-ff .toggle-no-asset .pull-overlap-hero 	{ padding-bottom: 9.375rem; }
	.page-lp-template-ff .container-asset 						{ padding-bottom: 1.875rem; }
}

/* grid fallback */
.page-lp-template-ff .wrap-inner 								{ max-width: 660px; }

/* grid */
@supports ( display: grid ) {
	@media screen and (min-width: 60em) {
		/* undo fallback */
		.page-lp-template-ff .wrap-inner 						{ max-width: 1150px; }
		/* end undo fallback */

		.page-lp-template-ff .card 								{ margin-top: 7rem; padding: 1.875rem 2.5rem 0; } /* 112/16 = 7 */
		.page-lp-template-ff .grid___wrap 						{ gap: 1.875rem 3.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
		
		/* the 3 sections take up entire grid columns, but different rows */
		.page-lp-template-ff .hero 								{ grid-column: 1 / 3; grid-row: 1; }
		.page-lp-template-ff .container-asset 					{ grid-column: 1 / 3; grid-row: 2; }
		.page-lp-template-ff .container-form 					{ grid-column: 1 / 3; grid-row: 1 / 4; display: grid; } /* display grid so card expands full container */

		/* the 3 sections have inner grids which control positioning of their respective content */
		.page-lp-template-ff .container-form .grid___item 		{ grid-column: 2; }
		.page-lp-template-ff .container-asset .grid___item,
		.page-lp-template-ff .hero .grid___item 				{ grid-column: 1; z-index: 1; } /* regain cosmetic top position of content */
	}
}

/*
	========================================
	Templates = page-lp-template-wb
				page-lp-template-sr
				page-lp-template-cm
				page-lp-template-ty
	========================================
*/

/* hero cube */
.hero___content-block 					{ padding-bottom: 1.875rem; padding-top: 3.125rem; }
.hero___content-block .header 			{ display: flex; flex-flow: column; gap: 1.25rem 2.4rem; padding-bottom: 1.875rem; }
.header___social 						{ align-items: center; display: inline-flex; gap: 1rem; }
.header___social li  					{ flex-shrink: 0; }
.header___social svg 					{ vertical-align: middle; }
.header___social .hashtag 				{ margin-right: 1.25rem; }
.header___social .hashtag::before 		{ content: '#'; }
@media (min-width: 38.75em) {
	.hero___content-block .header 		{ align-items: center; flex-flow: row; justify-content: space-between; }
	.hero___content-block .header.xlarge { align-items: flex-start; flex-flow: column; }
}

/* cta */
.container-cta 							{ padding: 2.5rem 0; text-align: center; }

/* envelope-like card */
.section-main-content .card 			{ background: #fff; padding: 1.875rem 0; }
.section-main-content .card.card-alt 	{ padding-bottom: 0; }

@media (min-width: 60em) {
	.hero___content-block 				{ margin-left: 1.875rem; max-width: 670px; padding-left: 1.25rem; padding-right: 1.25rem; }
	.section-main-content .card 		{ border-radius: 8px 8px 0 0; padding-left: 1.875rem; padding-right: 1.875rem; }
	.pull-overlap-hero 					{ padding-bottom: 15.75rem;	}
	.push-overlap-hero					{ margin-top: -13.75rem; }
}

/*
	========================================
	Template = page-lp-template-wb
	========================================
*/

/* stacked container holder within a grid item */
.containers-holder 						{ display: flex; flex-flow: column; gap: 1.875rem; }

/* container with rows - note display can be overridden via lp boolean */
.container-rows 						{ display: flex; flex-flow: column; gap: 1.25rem; }
.container-rows p,
.container-rows h2,
.container-rows h3,
.container-rows h4,
.container-rows h5 						{ margin-bottom: 0; }
.container-rows___row 					{ align-items: flex-start; display: flex; gap: 1.25rem; }
.container-rows___row img				{ max-width: 75px; } /* shares asset with email which accepts 100px */

/*
	========================================
	Template = page-lp-template-sr
	========================================
*/

/* floating card */
.container-card							{ padding: 1.875rem 0 1.5625rem; }
.container-card h2,
.container-card h3,
.container-card h4,
.container-card h5 						{ margin-bottom: .9375rem; }
@media (min-width: 60em) {
	.container-card 					{ border-radius: 8px; padding-left: 1.875rem; padding-right: 1.875rem; }
}

/* session listings */
.container-listings h2,
.container-listings h3,
.container-listings h5,
.container-listings p 					{ margin-bottom: .9375rem; }
.container-listings h4,
.container-listings .h4 				{ margin-bottom: .3125rem; }

/*
	========================================
	Grid
	========================================
*/

/* flex fallback */
.grid___wrap 							{ display: flex; flex-flow: column; gap: 1.875rem;  }

/* grid */
@supports ( display: grid ) {
	.grid___wrap 						{ display: grid; grid-template-rows: auto; }

	@media screen and (min-width: 60em) {
		.grid___wrap 					{ gap: 3.75rem; grid-template-columns: repeat(2, 1fr); }
		.grid___wrap-offset 			{ gap: 1.875rem; }
		.grid___wrap-triple 			{ gap: 2.5rem; grid-template-columns: repeat(3, 1fr); }
	}
}

/*
	========================================
	Story Containers
	Templates = page-lp-template-cm
				page-lp-template-ty
	dev notes - 
		expand or contract based on content
		grids with flex fallback
	========================================
*/

/* setting vertical rhythm with margin, not flex flex, so containers can be displayed/hidden without additional spacing */
.container-stacking-grids,
.container-text-only,
.container-triple-grid 																			{ margin-bottom: 2.5rem; }
.page-lp-template-sr .container-stacking-grids 													{ margin-bottom: 0; }

/* container holding offset reverse-stacking grids - all with toggleable asset semantically second, visually first at mobile */
.container-stacking-grids 																		{ display: flex; flex-flow: column; gap: 1.875rem; }
.container-stacking-grids .grid___item-toggleable 												{ order: -1; }

/* triple grid with non-toggeable asset semantically second, visually first */
.grid___wrap-triple .grid___item 																{ display: flex; flex-flow: column; gap: .9375rem; }
.grid___wrap-triple img 																		{ order: -1; }

/* story img */
.container-stacking-grids img,
.container-triple-grid img 																		{ border-radius: 8px; }

/* fallback asset */
.container-stacking-grids img,
.container-stacking-grids .toggle-ctrl-video,
.container-triple-grid img 																		{ max-width: 430px; }

/* on page-lp-template-sr - kicks in, when col2 floating card is hidden */
.grid___wrap-expandable-col2 																	{ margin-bottom: 1.875rem; }

/* expandable class applied to grid wrapper and controls display/hide of inner toggleable asset items */
.grid___wrap-expandable .grid___item-toggleable,
.grid___wrap-expandable-col2 .grid___item-toggleable-col2 										{ display: none; }

/* fallback spacing */
@media screen and (min-width: 60em) {
	.container-two-cols 																		{ margin-bottom: 1.875rem; }
}

@supports ( display: grid ) {
	/* undo fallbacks */
	.container-stacking-grids img,
	.container-stacking-grids .toggle-ctrl-video,
	.container-triple-grid img  																{ max-width: 100%; }
	.container-two-cols 																		{ margin-bottom: 0; }
	/* end undo fallbacks */

	@media screen and (min-width: 60em) {
		/* offset grids */
		.container-stacking-grids .grid___wrap-offset:nth-of-type(2n-1)							{ grid-template-columns: 3fr 4fr; }
		.container-stacking-grids .grid___wrap-offset:nth-of-type(2n)   						{ grid-template-columns: 4fr 3fr; }

		/* place asset second on every other grid  */
		.container-stacking-grids .grid___wrap-offset:nth-of-type(2n) .grid___item-toggleable 	{ order: 1; }

		/* when asset or column is toggled off, grid expands */
		.container-stacking-grids .grid___wrap-expandable.grid___wrap-offset,
		.container-stacking-grids .grid___wrap-expandable-col2.grid___wrap-offset,
		.grid___wrap-expandable,
		.grid___wrap-expandable-col2 															{ grid-template-columns: minmax(min-content, 1fr); }

		/* page-lp-template-sr */
		.container-two-cols 																	{ margin-bottom: 1.875rem; }
		.grid___wrap-expandable-col2 															{ margin-bottom: 0; }
	}
}

/*
	========================================
	Story Container Toggles
	Templates = page-lp-template-cm
				page-lp-template-ty
	========================================
*/

.container-stacking-grids.toggle-hide 															{ margin-bottom: 0; }

/* hide/display entire stories section */
/* if stories section is turned off, hide all individual stories, even if they are toggled on */
.container-stacking-grids.toggle-hide .grid___wrap-offset,
.container-stacking-grids.toggle-hide .grid___wrap-offset.toggle-display 						{ display: none; }
/* flex fallback */
.container-stacking-grids.toggle-display .grid___wrap-offset 									{ display: flex; }
/* grid */
@supports ( display: grid ) {
	.container-stacking-grids.toggle-display .grid___wrap-offset 								{ display: grid; }
}

/* toggles to control hide/display of individual stories */
.container-stacking-grids .grid___wrap-offset.toggle-hide 										{ display: none; }
/* flex fallback */
.container-stacking-grids .grid___wrap-offset.toggle-display 									{ display: flex; }
/* grid */
@supports ( display: grid ) {
	.container-stacking-grids .grid___wrap-offset.toggle-display 								{ display: grid; }
}

/* toggles to control hide/display of small stories section (individual small stories can't be toggled off) */
.container-triple-grid.toggle-hide .grid___wrap-triple 											{ display: none; }
/* flex fallback */
.container-triple-grid.toggle-display .grid___wrap-triple 										{ display: flex; }
/* grid */
@supports ( display: grid ) {
	.container-triple-grid.toggle-display .grid___wrap-triple 									{ display: grid; }
}

/*
	========================================
	Arabic Style Overrides
	========================================
*/

ol ol, ol ol ol,
ul ul, ul ul ul									{ margin-right: 2rem; }

.ar .header___social .hashtag 					{ margin-left: 1.25rem; }

.ar .hero___bg 									{ background-position: top right; }

@media (min-width: 60em) {
	.ar .hero___content-block 					{ margin-right: 1.875rem; }
}

.ar .hr-full-color {
	background-image:
		linear-gradient(
			to right, 
			#B2C8EC,
			#B2C8EC 17%,
			#002F56 17%,
			#002F56 47%,
			#3E75CF 47%
		);
}

/*
	========================================
	Arabic Footer
	========================================
*/

@media (min-width: 48.75em) {
	.ar .footer___links 						{ text-align: left; }
	.ar .footer___social 						{ justify-content: left; }
}

/*
	========================================
	Arabic Mktoforms

	Single column form, with turtle submit button full-width inputs
	2022-12-28 - SB
	========================================
*/

/* ar select dropdown */
.ar .mktoForm .mktoFormRow select.mktoField 	{ background-position: 16px center; }

/* ar labels */
.ar form.mktoForm .mktoFormRow .mktoFieldDescriptor.mktoFormCol .mktoLabel 	{ float: right; }

/* ar text */
.ar .mktoForm div,
.ar .mktoForm span,
.ar .mktoForm label,
.ar .mktoForm p,
.ar .mktoForm .mktoFormRow .mktoHtmlText,
.ar .mktoForm .mktoFormRow .privacy_statement,
.ar .mktoForm .mktoFormRow .form_terms 			{ text-align: right; }

/* ar radios and checkboxes */
.ar .mktoForm .mktoFormRow .mktoField 			{ float: right; }

/* ar button */
.ar .mktoButtonRow 								{ display: block; }