/* used by backend & frontend */
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
:root{
/* ## presets */
	--unit-xs: 4px;
	--unit-sm: 12px;
	--unit-md: 30px;
	--unit-lg: clamp(30px, -32.308px + 7.692vw, 60px);
	--unit-xl: clamp(30px, -156.923px + 23.077vw, 120px);

	--contentMarginLeft: calc(50% - 50vw);
	--contentMarginRight: calc(50% - 50vw);

	--contentMaxWidth: 1260px;
	--widthFull: 100%;
	--widthWide: 1400px;
	--widthNarrow: 800px;

	--header-space: 80px;
	--inset: 30px;

	--z-top: 1000;
	--z-mid: 100;
	--z-bottom: 0;

	--bodyfont: 'montserrat';
	--displayfont: "Roboto Slab";

	--txt-xxs: calc(10rem/16);
	--txt-xs: calc(12rem/16);
	--txt-sm: calc(14rem/16);
	--txt-reg: 1rem;
	--txt-md: calc(20rem/16);
	--txt-lg: calc(24rem/16);
	--txt-xl: calc(36rem/16);
	--txt-xxl: calc(40px/16);

	/* ## gutenberg spacing overrides */
	--wp--preset--spacing--20: 3px;
	--wp--preset--spacing--30: 10px;
	--wp--preset--spacing--40: 16px;
	--wp--preset--spacing--50: clamp(16px, 13.091px + 0.909vw, 24px);
	--wp--preset--spacing--60: clamp(16px, 8.727px + 2.273vw, 36px);
	--wp--preset--spacing--70: clamp(16px, 2.182px + 4.318vw, 54px);
	--wp--preset--spacing--80: clamp(16px, -8px + 7.5vw, 82px);

	/* ## fallback colours */
	--swatch_01: 	var(--swatch01, #302e3e);
	--swatch_02: 	var(--swatch02,#47445c);
	--swatch_03: 	var(--swatch03,#615e7d);
	--swatch_04: 	var(--swatch04,#3c3c3c);
	--swatch_05: 	var(--swatch05,#a8a8a8);
	--swatch_06: 	var(--swatch06,#d5d5d5);
	--swatch_07: 	var(--swatch07,#d5d5d5);
	--nova-brand:	#209cee;
	--nova-brand-dark:	#450bc2;
	--nova-brand-light:	#7744e6;

	--grey_dark: hsl(0, 0%, 15%);
	--grey_mid: hsl(0, 0%, 60%);
	--grey_light: hsl(0, 0%, 97%);

	--gray05: hsl(0, 0%, 95%);
	--gray10: hsl(0, 0%, 90%);
	--gray20: hsl(0, 0%, 80%);
	--gray30: hsl(0, 0%, 70%);
	--gray40: hsl(0, 0%, 60%);
	--gray50: hsl(0, 0%, 50%);
	--gray60: hsl(0, 0%, 40%);
	--gray70: hsl(0, 0%, 30%);
	--gray80: hsl(0, 0%, 20%);
	--gray90: hsl(0, 0%, 10%);

	--stripey: repeating-linear-gradient( 45deg, #f9f9fb, #f9f9fb 10px, #f0f0f0 10px, #f0f0f0 20px );
	--checkerboard: repeating-conic-gradient(rgba(231, 231, 231, 0.8) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
	--dashed: 1px dashed silver;
	--dotted: 1px dotted silver;
}

/* Atomic Styles
**************************************************/
	/* ## alignment */
	.txt-center{text-align: center;}
	.margin-center{margin-inline:auto}

	.justify-center{justify-content: center;}
	.justify-start{justify-content: start;}
	.justify-space-between{justify-content: space-between;}

	.align-center{align-items: center;}
	.align-end{align-items: end;}
	.place-center{place-content: center;}

	/* ## aspect-ratio */
	.asp-landscape{aspect-ratio: 4 / 3;}
	.asp-portrait{aspect-ratio: 3 / 4;}
	.asp-square{aspect-ratio: 1;}
	.asp-wide {aspect-ratio:16 / 9;}
	.asp-tall {aspect-ratio: 9 / 16;}

	/* ## colour */
	.color-inherit			{color: inherit;}

	.swatch-01				{color:var(--swatch_01)}
	.swatch-02				{color:var(--swatch_02)}
	.swatch-03				{color:var(--swatch_03)}
	.swatch-04				{color:var(--swatch_04)}
	.swatch-05				{color:var(--swatch_05)}
	.swatch-06				{color:var(--swatch_06)}
	.swatch-07				{color:var(--swatch_07)}
	.swatch-white			{color:white}
	.swatch-black			{color:black}
	.swatch-grey-dark		{color:var(--grey_dark)}
	.swatch-grey-mid		{color:var(--grey_mid)}
	.swatch-grey-light		{color:var(--grey_light)}

	.bg-swatch-01				{background-color:var(--swatch_01)}
	.bg-swatch-02				{background-color:var(--swatch_02)}
	.bg-swatch-03				{background-color:var(--swatch_03)}
	.bg-swatch-04				{background-color:var(--swatch_04)}
	.bg-swatch-05				{background-color:var(--swatch_05)}
	.bg-swatch-06				{background-color:var(--swatch_06)}
	.bg-swatch-07				{background-color:var(--swatch_07)}
	.bg-swatch-white			{background-color:white}
	.bg-swatch-black			{background-color:black}

	/* ## dimension */
	.h-xs{height:var(--unit-xs)}
	.h-sm{height:var(--unit-sm)}
	.h-md{height:var(--unit-md)}
	.h-lg{height:var(--unit-lg)}
	.h-xl{height:var(--unit-xl)}
	.h-100{height: 100%;}
	.h-auto{height: auto;}

	.w-xs{width:var(--unit-xs)}
	.w-sm{width:var(--unit-sm)}
	.w-md{width:var(--unit-md)}
	.w-lg{width:var(--unit-lg)}
	.w-xl{width:var(--unit-xl)}
	.w-100{width: 100%;}
	.w-90{width: 90%;}
	.w-80{width: 80%;}
	.w-70{width: 70%;}
	.w-60{width: 60%;}
	.w-50{width: 50%;}
	.w-40{width: 40%;}
	.w-30{width: 30%;}
	.w-20{width: 20%;}
	.w-10{width: 10%;}

	/* ## display */
	.d-none{display:none}
	.d-block{display:block}
	.d-iblock{display:inline-block}
	.d-inline{display:inline}
	.d-flex{display:flex}
	.d-grid{display:grid}
	.d-contents{display:contents}

	/* ## flex */
	.flexwrap{flex-wrap: wrap;}
	.flexflow-x{flex-direction: row;}
	.flexflow-y{flex-direction: column;}

	/* ## gap */
	.gap-xs{gap: var(--unit-xs)}
	.gap-sm{gap: var(--unit-sm)}
	.gap-md{gap: var(--unit-md)}
	.gap-lg{gap: var(--unit-lg)}
	.gap-xl{gap: var(--unit-xl)}

/* SECTION Grid System */
	.grid-1-1{grid-template-columns: 1fr 1fr;}
	.grid-2-1{grid-template-columns: 2fr 1fr;}
	.grid-1-2{grid-template-columns: 1fr 2fr;}

	.grid-1col{grid-template-columns: repeat(1, minmax(0, 1fr));}
	.grid-2col{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.grid-3col{grid-template-columns: repeat(3, minmax(0, 1fr));}
	.grid-4col{grid-template-columns: repeat(4, minmax(0, 1fr));}
	.grid-5col{grid-template-columns: repeat(5, minmax(0, 1fr));}
	.grid-6col{grid-template-columns: repeat(6, minmax(0, 1fr));}
	.grid-7col{grid-template-columns: repeat(7, minmax(0, 1fr));}
	.grid-8col{grid-template-columns: repeat(8, minmax(0, 1fr));}
	.grid-9col{grid-template-columns: repeat(9, minmax(0, 1fr));}
	.grid-10col{grid-template-columns: repeat(10, minmax(0, 1fr));}
	.grid-11col{grid-template-columns: repeat(11, minmax(0, 1fr));}
	.grid-12col{grid-template-columns: repeat(12, minmax(0, 1fr));}

	.grid-span-all{grid-column: 1/-1}
	.grid-span1{grid-column: span 1}
	.grid-span2{grid-column: span 2}
	.grid-span3{grid-column: span 3}
	.grid-span4{grid-column: span 4}
	.grid-span5{grid-column: span 5}
	.grid-span6{grid-column: span 6}
	.grid-span7{grid-column: span 7}
	.grid-span8{grid-column: span 8}
	.grid-span9{grid-column: span 9}
	.grid-span10{grid-column: span 10}
	.grid-span11{grid-column: span 11}
	.grid-span12{grid-column: span 12}

/* ## Grid System (md) */
@media (min-width:811px) and (max-width: 1024px){
	/* columns */
	.md-grid-1col{grid-template-columns: repeat(1, minmax(0, 1fr));}
	.md-grid-2col{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.md-grid-3col{grid-template-columns: repeat(3, minmax(0, 1fr));}
	.md-grid-4col{grid-template-columns: repeat(4, minmax(0, 1fr));}
	.md-grid-5col{grid-template-columns: repeat(5, minmax(0, 1fr));}
	.md-grid-6col{grid-template-columns: repeat(6, minmax(0, 1fr));}
	.md-grid-7col{grid-template-columns: repeat(7, minmax(0, 1fr));}
	.md-grid-8col{grid-template-columns: repeat(8, minmax(0, 1fr));}
	.md-grid-9col{grid-template-columns: repeat(9, minmax(0, 1fr));}
	.md-grid-10col{grid-template-columns: repeat(10, minmax(0, 1fr));}
	.md-grid-11col{grid-template-columns: repeat(11, minmax(0, 1fr));}
	.md-grid-12col{grid-template-columns: repeat(12, minmax(0, 1fr));}
}

/* ## Grid System (sm) */
@media only screen and (max-width: 810px){
	/* columns */
	.sm-grid-1col{grid-template-columns: repeat(1, minmax(0, 1fr));}
	.sm-grid-2col{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.sm-grid-3col{grid-template-columns: repeat(3, minmax(0, 1fr));}
	.sm-grid-4col{grid-template-columns: repeat(4, minmax(0, 1fr));}
	.sm-grid-5col{grid-template-columns: repeat(5, minmax(0, 1fr));}
	.sm-grid-6col{grid-template-columns: repeat(6, minmax(0, 1fr));}
	.sm-grid-7col{grid-template-columns: repeat(7, minmax(0, 1fr));}
	.sm-grid-8col{grid-template-columns: repeat(8, minmax(0, 1fr));}
	.sm-grid-9col{grid-template-columns: repeat(9, minmax(0, 1fr));}
	.sm-grid-10col{grid-template-columns: repeat(10, minmax(0, 1fr));}
	.sm-grid-11col{grid-template-columns: repeat(11, minmax(0, 1fr));}
	.sm-grid-12col{grid-template-columns: repeat(12, minmax(0, 1fr));}

	/* span */
	.sm-grid-span1{grid-column: span 1}
	.sm-grid-span2{grid-column: span 2}
	.sm-grid-span3{grid-column: span 3}
	.sm-grid-span4{grid-column: span 4}
	.sm-grid-span5{grid-column: span 5}
	.sm-grid-span6{grid-column: span 6}
	.sm-grid-span7{grid-column: span 7}
	.sm-grid-span8{grid-column: span 8}
	.sm-grid-span9{grid-column: span 9}
	.sm-grid-span10{grid-column: span 10}
	.sm-grid-span11{grid-column: span 11}
	.sm-grid-span12{grid-column: span 12}
}

/* !SECTION */

	/* ## margin */
	.mt-0{margin-top: 0 !important;}
	.mb-0{margin-bottom: 0 !important;}

	.mt-xs{margin-top:var(--unit-xs)}
	.mt-sm{margin-top:var(--unit-sm)}
	.mt-md{margin-top:var(--unit-md)}
	.mt-lg{margin-top:var(--unit-lg)}
	.mt-xl{margin-top:var(--unit-xl)}
	.mt-auto{margin-top:auto}

	.mb-xs{margin-bottom:var(--unit-xs)}
	.mb-sm{margin-bottom:var(--unit-sm)}
	.mb-md{margin-bottom:var(--unit-md)}
	.mb-lg{margin-bottom:var(--unit-lg)}
	.mb-xl{margin-bottom:var(--unit-xl)}
	.mb-auto{margin-bottom:auto}

	.ml-xs{margin-left:var(--unit-xs)}
	.ml-sm{margin-left:var(--unit-sm)}
	.ml-md{margin-left:var(--unit-md)}
	.ml-lg{margin-left:var(--unit-lg)}
	.ml-xl{margin-left:var(--unit-xl)}
	.ml-auto{margin-left:auto}

	.mr-xs{margin-right:var(--unit-xs)}
	.mr-sm{margin-right:var(--unit-sm)}
	.mr-md{margin-right:var(--unit-md)}
	.mr-lg{margin-right:var(--unit-lg)}
	.mr-xl{margin-right:var(--unit-xl)}
	.mr-auto{margin-right:auto}

	.minline-auto{margin-inline:auto}

	/* ## object-fit */
	.fit-contain{object-fit: contain;}
	.fit-cover{object-fit: cover;}

	/* ## padding */
	.p-0{padding:0}
	.p-xs{padding:var(--unit-xs)}
	.p-sm{padding:var(--unit-sm)}
	.p-md{padding:var(--unit-md)}
	.p-lg{padding:var(--unit-lg)}
	.p-xl{padding:var(--unit-xl)}

	.pt-0{padding-top:0}
	.pt-xs{padding-top:var(--unit-xs)}
	.pt-sm{padding-top:var(--unit-sm)}
	.pt-md{padding-top:var(--unit-md)}
	.pt-lg{padding-top:var(--unit-lg)}
	.pt-xl{padding-top:var(--unit-xl)}

	.pb-0{padding-bottom:0}
	.pb-xs{padding-bottom:var(--unit-xs)}
	.pb-sm{padding-bottom:var(--unit-sm)}
	.pb-md{padding-bottom:var(--unit-md)}
	.pb-lg{padding-bottom:var(--unit-lg)}
	.pb-xl{padding-bottom:var(--unit-xl)}

	.pl-0{padding-left:0}
	.pl-xs{padding-left:var(--unit-xs)}
	.pl-sm{padding-left:var(--unit-sm)}
	.pl-md{padding-left:var(--unit-md)}
	.pl-lg{padding-left:var(--unit-lg)}
	.pl-xl{padding-left:var(--unit-xl)}

	.pr-0{padding-right:0}
	.pr-xs{padding-right:var(--unit-xs)}
	.pr-sm{padding-right:var(--unit-sm)}
	.pr-md{padding-right:var(--unit-md)}
	.pr-lg{padding-right:var(--unit-lg)}
	.pr-xl{padding-right:var(--unit-xl)}

	.pinline-auto{padding-inline:auto}


	/* ## position */
	.pos-static{position:static}
	.pos-rel{position:relative}
	.pos-abs{position:absolute}
	.pos-fixed{position:fixed}
	.pos-sticky{position:sticky}

	/* ## radius */
	.radius-0{border-radius: 0}
	.radius-xs{border-radius: var(--unit-xs)}
	.radius-sm{border-radius: var(--unit-sm)}
	.radius-md{border-radius: var(--unit-md)}
	.radius-lg{border-radius: var(--unit-lg)}
	.radius-xl{border-radius: var(--unit-xl)}
	.radius-round{border-radius: 50%}

	/* ## text */
	.txt-xxs{font-size: var(--txt-xxs);}
	.txt-xs{font-size: var(--txt-xs);}
	.txt-sm{font-size: var(--txt-sm);}
	.txt-reg{font-size: var(--txt-reg);}
	.txt-md{font-size: var(--txt-md);}
	.txt-lg{font-size: var(--txt-lg);}
	.txt-xl{font-size: var(--txt-xl);}
	.bold{font-weight: bold;}
	.tdn{text-decoration: none;}
	.tdu{text-decoration: underline;}
	.caps{text-transform: uppercase;}
	.lowercase{text-transform: lowercase;}
	.initialcaps{text-transform: capitalize;}

	/* ## shadows */
	.shadow-sm{box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);}
	.shadow-md{box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);}
	.shadow-lg{box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.2);}

	/* ## z-index */
	.z-top{z-index: var(--z-top);}
	.z-mid{z-index: var(--z-mid);}
	.z-bottom{z-index: var(--z-bottom);}

	/* ## text columns */
	.txt-2col{
		columns: 2; column-gap: 2rem; break-inside: avoid;
		@media only screen and (max-width: 810px){
			columns: 1;
		}
	}


/* ## @Large SCREENS */
	@media (min-width:1025px){
		.lap--h-xs{height:var(--unit-xs)}

		/* hiding */
		.hide-desktop{display:none}
		.show-desktop{display:block}

	}

/* ## @Medium SCREENS */
	@media (min-width:811px) and (max-width: 1024px){
		.tab--h-xs{height:var(--unit-xs)}


		/* hiding */
		.hide-tablet{display:none}
		.show-tablet{display:block}

		/* gap tablet */
		.tab-gap-xs{gap: var(--unit-xs)}
		.tab-gap-sm{gap: var(--unit-sm)}
		.tab-gap-md{gap: var(--unit-md)}
		.tab-gap-lg{gap: var(--unit-lg)}
		.tab-gap-xl{gap: var(--unit-xl)}

		/* padding */
		.tab-p-0{padding:0}
		.tab-p-xs{padding:var(--unit-xs)}
		.tab-p-sm{padding:var(--unit-sm)}
		.tab-p-md{padding:var(--unit-md)}
		.tab-p-lg{padding:var(--unit-lg)}
		.tab-p-xl{padding:var(--unit-xl)}

	}

/* ## @Small SCREENS */
	@media only screen and (max-width: 810px){

		/* hiding */
		.hide-mobile{display:none}
		.show-mobile{display:block}

		/* gap mobile */
		.mob-gap-xs{gap: var(--unit-xs)}
		.mob-gap-sm{gap: var(--unit-sm)}
		.mob-gap-md{gap: var(--unit-md)}
		.mob-gap-lg{gap: var(--unit-lg)}
		.mob-gap-xl{gap: var(--unit-xl)}

		/* dimension */
		.sm-w-100{width: 100%;}
		.mob-w-90{width: 90%;}
		.mob-w-80{width: 80%;}
		.mob-w-70{width: 70%;}
		.mob-w-60{width: 60%;}
		.mob-w-50{width: 50%;}
		.mob-w-40{width: 40%;}
		.mob-w-30{width: 30%;}
		.mob-w-20{width: 20%;}
		.mob-w-10{width: 10%;}

		/* padding */
		.mob-p-0{padding:0}
		.mob-p-xs{padding:var(--unit-xs)}
		.mob-p-sm{padding:var(--unit-sm)}
		.mob-p-md{padding:var(--unit-md)}
		.mob-p-lg{padding:var(--unit-lg)}
		.mob-p-xl{padding:var(--unit-xl)}

	}