/* main.css */

/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Utilities
Helper classes with ability to override anything that comes before it
*/


/******************************************/
/*******  css/utilities/_imports.css  *******/
/******************************************/


/* Begin Imports
========================================================================== */

/* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* B612 Mono */
@import url('https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');


/* Material Symbols Outlined */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
/******************************************/
/********* _variables/z-index.css *********/
/******************************************/

.floating-image {
z-index: 1;
}

img,
table,
.simple-card,
.simple-cards,
.hs-form,
.mixed-content-wrapper,
.widget-type-linked_image,
.hs-video-widget {

	position: relative;
	z-index: 2;
	
}

/* Others (that I know of)
 * 
 * 
 * css/elements/elements.css --> .tooltip-content { z-index: 5} ;
 * 
 *  */
/******************************************/
/**********  _variables/_base.css  ********/
/******************************************/


:root {
  font-size: 16px;

/* 
 * For development purposes, use rems when creating layouts. 
 * 1rem = root font size
 * Do not use absolute pixel values. 
 * Almost every part of the RevPartners design style us made up of the sizes below. 
 * 
 *    XS         0.5 rem
 *    Small      1rem
 *    Base       1.5rem
 *    Large      3rem
 *    XL         3.75rem
 *    XXL        7.5rem
 * 
 * */

  /* Units 
   * 
   * 1 unit is 24 px. This is the most common gap found across the website. 
   * 
   * */
	
  --uxxs: 0.25rem; 
	--uxs: 0.5rem; 
	--us: 1rem;
	--u: 1.5rem;
	--um: 3rem;
	--ul: 3.75rem;
	--uxl: 7.5rem;
	--uxxl: 15rem;
	
	  /* Gaps */
	--gap-xxs: var(--uxxs); /* 8px */
	--gap-xs: var(--uxs); /* 8px */
	--gap-s: var(--us); /* 16px */
	--gap: var(--u); /* 24px */
	--gap-m: var(--um); /* 48px */
	--gap-l: var(--ul); /* 60px */
	--gap-xl: var(--uxl); /* 120px */
	--gap-xxl: var(--uxxl); /* 240px */

	/* Corners */
	--corner-s: .25rem;
	--corner: .5rem;
	--corner-l: 1rem;
	--corner-xl: 2rem;
	--corner-xxl: 7.5rem;
	--corner-pill: 100rem;
	--corner-circle: 9999px;
	
	/* Border width */
	--border-width-s: 1px;
	--border-width: 2px;
	--border-width-l: 3px;


	/* Width of main page content */
	--max-width: 1200px; 



	--margin-inline: 1.2rem; /* 24px */
	--padding-inline: 1.2rem; /* 24px */
	--margin-block: 7.5rem; /* 120px */
	--padding-block: 3.75rem; /* 60px */

	--inline: 1.2rem; /* 24px */ 
	--block: 1.2rem; /* 24px */ 

	
}


@media (max-width: 768px) {
	:root {
	font-size: 16px;
    --margin-inline: var(--gap-m, 2.5rem); /* 48px */
		--margin-block: 3.75rem; /* 60px */
		--padding-inline: 1.5rem; /* 24px */
		--padding-block: 1.5rem; /* 24px */
	}
}


.content-wrapper {
	max-width: var(--max-width);
}

/* Kind of unnecessary, but keeps things clean */
@media (max-width: 1218px) {
	.content-wrapper {
		padding-inline: var(--padding-inline);
	}
}
/******************************************/
/**********  _variables/colors.css  *******/
/******************************************/


/* Base Colors */
:root {
	--clr-ebony-clay: #24273A;
	--clr-river-bed: #434761;
	--clr-carbon: #555970; 
	--clr-steel: #A1A2A7;
	--clr-iron: #DDDEE2;
	--clr-mercury: #F3F3F4;
	--clr-platinum: #F7F7FD;
	--clr-off-white: #FDFDFD;

	/* 	Accents */
	--clr-rally-green: #17B451;
	--clr-rally-green-rgb: 23, 180, 82;
	--clr-go-green: #6AD491;
	--clr-grass: #116631;
	--clr-midnight-green: #22433E;
	--clr-racecar-red: #FB3131;
	--clr-flamingo: #FF5555;
	--clr-tango: #F7761E;
	--clr-lightning: #FBAA31;
	--clr-fast-blue: #329DFF;
	--clr-ultra-purple: #8C32FF;


	/* Lighter accents */
	--clr-mint: #D1F0DC;
	--clr-sky: #CCE7FF;
	--clr-peach-vibes: #FEE4D5;
	--clr-coral: #FFD9D7;
	--clr-lavender: #E9D6FF;

	/* Darker Accents */
	--clr-amethyst: #B377FF;
	--clr-indigo: #0F2F4D;
	--clr-burnt-red: #8C0000;
	--clr-burnt-orange: #7B3200;
	--clr-deep-purple: #35007A;
	
	/* Variables */
	--clr-green: var(--clr-rally-green);
	--clr-green-rgb: var(--clr-rally-green-rgb); /* RGB value only. No Alpha */
	--clr-blue: var(--clr-fast-blue);
	--clr-orange: var(--clr-tango);
	--clr-red: var(--clr-racecar-red);
	--clr-purple: var(--clr-ultra-purple);
	--clr-white: var(--clr-off-white);
	--clr-black: var(--clr-ebony-clay);
	--clr-dark: var(--clr-river-bed);
	
	/* Theme variables */
	--clr-primary: var(--clr-green); /* The star of the show. Read the "Primary Color" comment at the bottom of this file */
	--clr-primary-rgb: var(--clr-green-rgb);
	--clr-secondary: var(--clr-text);
	--clr-alert: var(--clr-red);
	--clr-bg-alert: var(--clr-bg-red);


	/* Transparent Backgrounds */
	--clr-primary-bg: rgba(from var(--clr-primary) r g b / 0.2);
	--clr-bg-bg: rgba(0,0,0,0.01);
	--clr-bg-bg-2: rgba(0,0,0,0.05);
	--clr-green-bg: rgba(23, 180, 81, 0.2);
	--clr-blue-bg: rgba(50, 157, 255, 0.2);
	--clr-orange-bg: rgba(239, 129, 27, 0.2);
	--clr-red-bg: rgba(251, 49, 49, 0.2);
	--clr-purple-bg: rgba(140, 50, 255, 0.2);
	--clr-white-bg: rgba(255, 255, 255, 0.2);
	
	/* 	Opaque Light Backgrounds */
	--clr-primary-light: var(--clr-mint);
	--clr-green-light: var(--clr-mint);
	--clr-blue-light: var(--clr-sky);
	--clr-orange-light: var(--clr-peach-vibes);
	--clr-red-light: var(--clr-coral);
	--clr-purple-light: var(--clr-lavender);

	/* Opaque Dark Backgrounds */
	--clr-primary-dark: var(--clr-midnight-green);
	--clr-green-dark: var(--clr-midnight-green);
	--clr-blue-dark: var(--clr-indigo);
	--clr-orange-dark: var(--clr-burnt-orange);
	--clr-red-dark: var(--clr-burnt-red);
	--clr-purple-dark: var(--clr-deep-purple);
	
	

	/* Gradients */
	/* 	--gradient-byr: linear-gradient(90deg, rgba(49, 154, 251, 1), rgba(251, 170, 49, 1), rgba(251, 170, 49, 1), rgba(251, 170, 49, 1), rgba(251, 49, 49, 1)); */
	--gradient-byr: linear-gradient(72deg, rgba(49, 154, 251, 1) 25%, rgba(251,170,49,1) 25%, rgba(251,170,49,1) 44%, rgba(251,170,49,1) 75%, rgba(251,49,49,1) 75%);
	--gradient-gyr: linear-gradient(56deg, rgba(23,180,81,1) 25%, rgba(251,170,49,1) 25%, rgba(251,170,49,1) 44%, rgba(251,170,49,1) 75%, rgba(251,49,49,1) 75%);

	/* Transparent Backgrounds (LEGACY) */
	--clr-bg-primary: var(--clr-primary-bg);
	--clr-bg-green: var(--clr-green-bg);
	--clr-bg-blue: var(--clr-blue-bg);
	--clr-bg-orange: var(--clr-orange-bg);
	--clr-bg-red: var(--clr-red-bg);
	--clr-bg-purple: var(--clr-purple-bg);
	--clr-bg-white: var(--clr-white-bg);
}



/* Explicit light mode 
* For when parent elements are using dark mode */
:root,
.light-mode {
	/* Grays */
	--clr-gray-10: #1D1F2E;
	--clr-gray-20: #2A2C3C;
	--clr-gray-30: #3F425A;
	--clr-gray-40: #545978;
	--clr-gray-50: #696F96;
	--clr-gray-60: #8F8FA3;
	--clr-gray-70: #ABABBA;
	--clr-gray-80: #C3C5D5;
	--clr-gray-90: #E1E2EA;

	/* Primary Light */
	--clr-text: var(--clr-river-bed);   
	--clr-title: var(--clr-river-bed);
	--clr-bg: var(--clr-off-white);
	--clr-bg-2: var(--clr-mercury);
	--clr-bg-3: var(--clr-gray-90);
	--clr-bg-4: var(--clr-platinum);
	--clr-illustrations: var(--clr-carbon);

	/* Transparent */
	--clr-stroke: rgba(36, 39, 58, .10);
	--clr-stroke-2: rgba(36, 39, 58, .30);
	--clr-stroke-3: rgba(0, 0, 0, 0.20);
	--clr-text-transparent: rgba(36, 39, 58, 0.2);
	--clr-bg-text: var(--clr-text-transparent);

	--clr-bg-transparent: rgba(253, 253, 253, 0.2);
	--clr-bg-transparent-50: rgba(253, 253, 253, 0.50);
	--clr-bg-transparent-80: rgba(253, 253, 253, 0.80);
	
	/* Opaque Light Mode Backgrounds */
	--clr-primary-bg-opaque: var(--clr-primary-light);
	--clr-green-bg-opaque: var(--clr-green-light);
	--clr-blue-bg-opaque: var(--clr-blue-light);
	--clr-orange-bg-opaque: var(--clr-orange-light);
	--clr-red-bg-opaque: var(--clr-red-light);
	--clr-purple-bg-opaque: var(--clr-purple-light);

	/* Metals */
	--clr-copper: #EE6F53;
	--clr-copper-bg: rgba(238, 111, 83, 0.2);
	--clr-bronze: #AC9871;
	--clr-bronze-bg: rgba(172, 152, 113, 0.2);
	--clr-silver: #A0A0A0;
	--clr-silver-bg: rgba(180, 180, 180, 0.2);
	--clr-gold: #BF9604;
	--clr-gold-bg: rgba(191, 150, 4, 0.2);
	--clr-platinum: #6D6A6A;
	--clr-platinum-bg: #FFFFFF;

	/* Required because CSS has smartly dumb inheritence. Disable if stuff breaks */
	color: var(--clr-text);
}


/* Dark Mode */
.dark-mode {




	/* Grays Dark */
	--clr-gray-90: #1D1F2E;
	--clr-gray-80: #2A2C3C;
	--clr-gray-70: #3F425A;
	--clr-gray-60: #545978;
	--clr-gray-50: #696F96;
	--clr-gray-40: #8F8FA3;
	--clr-gray-30: #ABABBA;
	--clr-gray-20: #C3C5D5;
	--clr-gray-10: #E1E2EA;

	/* Primary Dark */
	--clr-text: var(--clr-off-white);   
	--clr-title: var(--clr-mercury);
	--clr-bg: var(--clr-ebony-clay);
	--clr-bg-2: var(--clr-gray-90);
	--clr-bg-3: var(--clr-gray-70);
	--clr-bg-4: var(--clr-gray-50);
	--clr-illustrations: var(--clr-steel);

	/* Accents Dark */
	--clr-purple: var(--clr-amethyst);
	--clr-orange: #EF811B;

	/* Transparent Dark */
	--clr-stroke: rgba(255, 255, 255, .10);
	--clr-stroke-2: rgba(255, 255, 255, .20);
	--clr-text-transparent: rgba(253, 253, 253, 0.2);
	--clr-bg-text: var(--clr-text-transparent);
	--clr-bg-bg: rgba(255,255,255,0.01);
	--clr-bg-bg-2: rgba(255,255,255,0.05);
	--clr-bg-transparent: rgba(36, 39, 58, 0.2);
	--clr-bg-transparent-50: rgba(36, 39, 58, 0.50);
	--clr-bg-transparent-80: rgba(36, 39, 58, 0.80);

	/* Opaque Backgrounds */
	--clr-primary-bg-opaque: var(--clr-primary-dark);
	--clr-green-bg-opaque: var(--clr-green-dark);
	--clr-blue-bg-opaque: var(--clr-blue-dark);
	--clr-orange-bg-opaque: var(--clr-orange-dark);
	--clr-red-bg-opaque: var(--clr-red-dark);
	--clr-purple-bg-opaque: var(--clr-purple-dark);

	/* Precious Metals Dark */
	--clr-copper: #EE6F53;
	--clr-copper-bg: rgba(238, 111, 83, 0.2);
	--clr-bronze: #BCA882;
	--clr-bronze-bg: rgba(188, 168, 130, 0.2);
	--clr-silver: #B4B4B4;
	--clr-silver-bg: rgba(180, 180, 180, 0.2);
	--clr-gold: #E1B620;
	--clr-gold-bg: rgba(225, 182, 32, 0.2);
	--clr-platinum: #FFFFFF;
	--clr-platinum-bg: rgba(255, 255, 255, 0.5);


	/* Required because CSS has dumb inheritence. Disable if stuff breaks */
	color: var(--clr-text);

}


/* Color classes */

/* Turns each color into a class that overrides the text color, background, and border color 

	Example usage:

	<div class="blue">My text color is blue</div>
	<div class="bg-green">My background color is green</div>

*/




.primary.primary, .clr-primary.clr-primary {
	color: var(--clr-primary);
	/* background-color: var(--clr-bg-primary); */
	/* border-color: var(--clr-primary); */
}

.background-primary, .bg-primary {
	background-color: var(--clr-primary);
}

.background-light-primary, .bg-primary-bg {
	background-color: var(--clr-primary-bg);
}

.border-primary {
	border-color: var(--clr-primary);
}

.badge.primary {
	color: var(--clr-primary);
	background-color: var(--clr-primary-bg);
	border-color: var(--clr-primary);
}


.chip.primary {
	color: var(--clr-bg);
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
}

.green.green, .clr-green.clr-green {
	color: var(--clr-green);
	/* background-color: var(--clr-bg-green); */
	/* border-color: var(--clr-green); */
}

.background-green, .bg-green {
	background-color: var(--clr-green);
}

.background-light-green, .bg-green-bg {
	background-color: var(--clr-green-bg);
}

.border-green {
	border-color: var(--clr-green);
}

.badge.green {
	color: var(--clr-green);
	background-color: var(--clr-green-bg);
	border-color: var(--clr-green);
}


.chip.green {
	color: var(--clr-bg);
	background-color: var(--clr-green);
	border-color: var(--clr-green);
}

.blue.blue, .clr-blue.clr-blue {
	color: var(--clr-blue);
	/* background-color: var(--clr-bg-blue); */
	/* border-color: var(--clr-blue); */
}

.background-blue, .bg-blue {
	background-color: var(--clr-blue);
}

.background-light-blue, .bg-blue-bg {
	background-color: var(--clr-blue-bg);
}

.border-blue {
	border-color: var(--clr-blue);
}

.badge.blue {
	color: var(--clr-blue);
	background-color: var(--clr-blue-bg);
	border-color: var(--clr-blue);
}


.chip.blue {
	color: var(--clr-bg);
	background-color: var(--clr-blue);
	border-color: var(--clr-blue);
}

.orange.orange, .clr-orange.clr-orange {
	color: var(--clr-orange);
	/* background-color: var(--clr-bg-orange); */
	/* border-color: var(--clr-orange); */
}

.background-orange, .bg-orange {
	background-color: var(--clr-orange);
}

.background-light-orange, .bg-orange-bg {
	background-color: var(--clr-orange-bg);
}

.border-orange {
	border-color: var(--clr-orange);
}

.badge.orange {
	color: var(--clr-orange);
	background-color: var(--clr-orange-bg);
	border-color: var(--clr-orange);
}


.chip.orange {
	color: var(--clr-bg);
	background-color: var(--clr-orange);
	border-color: var(--clr-orange);
}

.red.red, .clr-red.clr-red {
	color: var(--clr-red);
	/* background-color: var(--clr-bg-red); */
	/* border-color: var(--clr-red); */
}

.background-red, .bg-red {
	background-color: var(--clr-red);
}

.background-light-red, .bg-red-bg {
	background-color: var(--clr-red-bg);
}

.border-red {
	border-color: var(--clr-red);
}

.badge.red {
	color: var(--clr-red);
	background-color: var(--clr-red-bg);
	border-color: var(--clr-red);
}


.chip.red {
	color: var(--clr-bg);
	background-color: var(--clr-red);
	border-color: var(--clr-red);
}

.purple.purple, .clr-purple.clr-purple {
	color: var(--clr-purple);
	/* background-color: var(--clr-bg-purple); */
	/* border-color: var(--clr-purple); */
}

.background-purple, .bg-purple {
	background-color: var(--clr-purple);
}

.background-light-purple, .bg-purple-bg {
	background-color: var(--clr-purple-bg);
}

.border-purple {
	border-color: var(--clr-purple);
}

.badge.purple {
	color: var(--clr-purple);
	background-color: var(--clr-purple-bg);
	border-color: var(--clr-purple);
}


.chip.purple {
	color: var(--clr-bg);
	background-color: var(--clr-purple);
	border-color: var(--clr-purple);
}

.text.text, .clr-text.clr-text {
	color: var(--clr-text);
	/* background-color: var(--clr-bg-text); */
	/* border-color: var(--clr-text); */
}

.background-text, .bg-text {
	background-color: var(--clr-text);
}

.background-light-text, .bg-text-bg {
	background-color: var(--clr-text-bg);
}

.border-text {
	border-color: var(--clr-text);
}

.badge.text {
	color: var(--clr-text);
	background-color: var(--clr-text-bg);
	border-color: var(--clr-text);
}


.chip.text {
	color: var(--clr-bg);
	background-color: var(--clr-text);
	border-color: var(--clr-text);
}

.bg.bg, .clr-bg.clr-bg {
	color: var(--clr-bg);
	/* background-color: var(--clr-bg-bg); */
	/* border-color: var(--clr-bg); */
}

.background-bg, .bg-bg {
	background-color: var(--clr-bg);
}

.background-light-bg, .bg-bg-bg {
	background-color: var(--clr-bg-bg);
}

.border-bg {
	border-color: var(--clr-bg);
}

.badge.bg {
	color: var(--clr-bg);
	background-color: var(--clr-bg-bg);
	border-color: var(--clr-bg);
}


.chip.bg {
	color: var(--clr-bg);
	background-color: var(--clr-bg);
	border-color: var(--clr-bg);
}

.2.2, .clr-2.clr-2 {
	color: var(--clr-2);
	/* background-color: var(--clr-bg-2); */
	/* border-color: var(--clr-2); */
}

.background-2, .bg-2 {
	background-color: var(--clr-2);
}

.background-light-2, .bg-2-bg {
	background-color: var(--clr-2-bg);
}

.border-2 {
	border-color: var(--clr-2);
}

.badge.2 {
	color: var(--clr-2);
	background-color: var(--clr-2-bg);
	border-color: var(--clr-2);
}


.chip.2 {
	color: var(--clr-bg);
	background-color: var(--clr-2);
	border-color: var(--clr-2);
}

.white.white, .clr-white.clr-white {
	color: var(--clr-white);
	/* background-color: var(--clr-bg-white); */
	/* border-color: var(--clr-white); */
}

.background-white, .bg-white {
	background-color: var(--clr-white);
}

.background-light-white, .bg-white-bg {
	background-color: var(--clr-white-bg);
}

.border-white {
	border-color: var(--clr-white);
}

.badge.white {
	color: var(--clr-white);
	background-color: var(--clr-white-bg);
	border-color: var(--clr-white);
}


.chip.white {
	color: var(--clr-bg);
	background-color: var(--clr-white);
	border-color: var(--clr-white);
}

.black.black, .clr-black.clr-black {
	color: var(--clr-black);
	/* background-color: var(--clr-bg-black); */
	/* border-color: var(--clr-black); */
}

.background-black, .bg-black {
	background-color: var(--clr-black);
}

.background-light-black, .bg-black-bg {
	background-color: var(--clr-black-bg);
}

.border-black {
	border-color: var(--clr-black);
}

.badge.black {
	color: var(--clr-black);
	background-color: var(--clr-black-bg);
	border-color: var(--clr-black);
}


.chip.black {
	color: var(--clr-bg);
	background-color: var(--clr-black);
	border-color: var(--clr-black);
}

.primary-bg.primary-bg, .clr-primary-bg.clr-primary-bg {
	color: var(--clr-primary-bg);
	/* background-color: var(--clr-bg-primary-bg); */
	/* border-color: var(--clr-primary-bg); */
}

.background-primary-bg, .bg-primary-bg {
	background-color: var(--clr-primary-bg);
}

.background-light-primary-bg, .bg-primary-bg-bg {
	background-color: var(--clr-primary-bg-bg);
}

.border-primary-bg {
	border-color: var(--clr-primary-bg);
}

.badge.primary-bg {
	color: var(--clr-primary-bg);
	background-color: var(--clr-primary-bg-bg);
	border-color: var(--clr-primary-bg);
}


.chip.primary-bg {
	color: var(--clr-bg);
	background-color: var(--clr-primary-bg);
	border-color: var(--clr-primary-bg);
}

.green-bg.green-bg, .clr-green-bg.clr-green-bg {
	color: var(--clr-green-bg);
	/* background-color: var(--clr-bg-green-bg); */
	/* border-color: var(--clr-green-bg); */
}

.background-green-bg, .bg-green-bg {
	background-color: var(--clr-green-bg);
}

.background-light-green-bg, .bg-green-bg-bg {
	background-color: var(--clr-green-bg-bg);
}

.border-green-bg {
	border-color: var(--clr-green-bg);
}

.badge.green-bg {
	color: var(--clr-green-bg);
	background-color: var(--clr-green-bg-bg);
	border-color: var(--clr-green-bg);
}


.chip.green-bg {
	color: var(--clr-bg);
	background-color: var(--clr-green-bg);
	border-color: var(--clr-green-bg);
}

.blue-bg.blue-bg, .clr-blue-bg.clr-blue-bg {
	color: var(--clr-blue-bg);
	/* background-color: var(--clr-bg-blue-bg); */
	/* border-color: var(--clr-blue-bg); */
}

.background-blue-bg, .bg-blue-bg {
	background-color: var(--clr-blue-bg);
}

.background-light-blue-bg, .bg-blue-bg-bg {
	background-color: var(--clr-blue-bg-bg);
}

.border-blue-bg {
	border-color: var(--clr-blue-bg);
}

.badge.blue-bg {
	color: var(--clr-blue-bg);
	background-color: var(--clr-blue-bg-bg);
	border-color: var(--clr-blue-bg);
}


.chip.blue-bg {
	color: var(--clr-bg);
	background-color: var(--clr-blue-bg);
	border-color: var(--clr-blue-bg);
}

.orange-bg.orange-bg, .clr-orange-bg.clr-orange-bg {
	color: var(--clr-orange-bg);
	/* background-color: var(--clr-bg-orange-bg); */
	/* border-color: var(--clr-orange-bg); */
}

.background-orange-bg, .bg-orange-bg {
	background-color: var(--clr-orange-bg);
}

.background-light-orange-bg, .bg-orange-bg-bg {
	background-color: var(--clr-orange-bg-bg);
}

.border-orange-bg {
	border-color: var(--clr-orange-bg);
}

.badge.orange-bg {
	color: var(--clr-orange-bg);
	background-color: var(--clr-orange-bg-bg);
	border-color: var(--clr-orange-bg);
}


.chip.orange-bg {
	color: var(--clr-bg);
	background-color: var(--clr-orange-bg);
	border-color: var(--clr-orange-bg);
}

.red-bg.red-bg, .clr-red-bg.clr-red-bg {
	color: var(--clr-red-bg);
	/* background-color: var(--clr-bg-red-bg); */
	/* border-color: var(--clr-red-bg); */
}

.background-red-bg, .bg-red-bg {
	background-color: var(--clr-red-bg);
}

.background-light-red-bg, .bg-red-bg-bg {
	background-color: var(--clr-red-bg-bg);
}

.border-red-bg {
	border-color: var(--clr-red-bg);
}

.badge.red-bg {
	color: var(--clr-red-bg);
	background-color: var(--clr-red-bg-bg);
	border-color: var(--clr-red-bg);
}


.chip.red-bg {
	color: var(--clr-bg);
	background-color: var(--clr-red-bg);
	border-color: var(--clr-red-bg);
}

.purple-bg.purple-bg, .clr-purple-bg.clr-purple-bg {
	color: var(--clr-purple-bg);
	/* background-color: var(--clr-bg-purple-bg); */
	/* border-color: var(--clr-purple-bg); */
}

.background-purple-bg, .bg-purple-bg {
	background-color: var(--clr-purple-bg);
}

.background-light-purple-bg, .bg-purple-bg-bg {
	background-color: var(--clr-purple-bg-bg);
}

.border-purple-bg {
	border-color: var(--clr-purple-bg);
}

.badge.purple-bg {
	color: var(--clr-purple-bg);
	background-color: var(--clr-purple-bg-bg);
	border-color: var(--clr-purple-bg);
}


.chip.purple-bg {
	color: var(--clr-bg);
	background-color: var(--clr-purple-bg);
	border-color: var(--clr-purple-bg);
}



/* Transparent */

.bg-none.bg-none {
	background-color: transparent;
}


/* Color filters */

/* Turn text gray color to green  
* Based on this color calculator on codepen: https://codepen.io/sosuke/pen/Pjoqqp 
* Mainly used to turn icons in the footer to green on hover */
:root {

	/* Place into the "filter:" property 
	* 
	* Example:
	*    img {
	*         filter: var(--convert-gray-to-green);
	*    } 
	* 
	* */  
	--convert-gray-to-green: brightness(0) saturate(100%) invert(51%) sepia(73%) saturate(525%) hue-rotate(90deg) brightness(94%) contrast(90%);
}









/* Primary color 
  *  
	* The primary color is used in a lot of places. It's built for scale. 
	* Let's say you want a group of that have a bunch of different elements
	* like text, icons, background, buttons, and other stuff. 
	* 
	* And you want the color to adapt to the theme AND ALSO allow user 
	* to pick a color on the elemnt to override. You could set the colors individually
	* and assign the variables of each, but it gets messy. 
	* 
	* Instead, you can assign var(--clr-primary) to everything
	* and use your custom color to override --clr-primary 
	* 
	* Example:  

	.card .text {
		color: var(--clr-primary);
	}

	.card .icon {
		color: var(--clr-primary);  
	}

	* Now that you have these set up, you can control the color with both by 
	* overriding the variable on the container.

	.card {
		--clr-primary: white;
	}

	* This will change both the text and icon to white at once.
	* 
	* It will also affect the background color if you assign one using --clr-bg-primary. 

	.card .text {
		color: var(--clr-primary);
		background: var(--clr-bg-primary);
	}

	.card .icon {
		color: var(--clr-primary);
		background: var(--clr-bg-primary);
	}

	.card {
		--clr-primary: white;
		--clr-bg-primary: black;
	}
 
* */

/******************************************/
/*******  _variables/effects.css  *********/
/******************************************/

:root {

  /* Borders */
	
	--outline: var(--border-width) dashed var(--clr-primary);
	--outline-s: var(--border-width-s) dashed var(--clr-primary);
	--border: var(--border-width) solid var(--clr-stroke);
	--stroke: var(--border-width) solid var(--clr-stroke);
	--stroke-2: var(--border-width) solid var(--clr-stroke-2);


	/* Shadows */
	--shadow-menu: 0px 2px 22px 0px rgba(0, 0, 0, 0.10);
	--shadow-light: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
	--shadow-lighter: 0px 2px 4px 0px rgba(0, 0, 0, 0.16); 
	--shadow: var(--shadow-light);
	--shadow-2: var(--shadow-lighter);
	--shadow-3: var(--shadow-menu);
	--shadow-clr-stroke: var(--shadow-light);
	--shadow-green:	0px 3px 6px 0px rgba(23, 180, 82, 0.10), 0px 11px 11px 0px rgba(23, 180, 82, 0.09), 0px 25px 15px 0px rgba(23, 180, 82, 0.05), 0px 44px 18px 0px rgba(23, 180, 82, 0.01), 0px 69px 19px 0px rgba(23, 180, 82, 0.00);								 
	--shadow-blue: 0px 69px 19px 0px rgba(50, 157, 255, 0.00), 0px 44px 18px 0px rgba(50, 157, 255, 0.01), 0px 25px 15px 0px rgba(50, 157, 255, 0.05), 0px 11px 11px 0px rgba(50, 157, 255, 0.09), 0px 3px 6px 0px rgba(50, 157, 255, 0.10);			 
	--shadow-orange: 0px 69px 19px 0px rgba(239, 129, 27, 0.00), 0px 44px 18px 0px rgba(239, 129, 27, 0.01), 0px 25px 15px 0px rgba(239, 129, 27, 0.05), 0px 11px 11px 0px rgba(239, 129, 27, 0.09), 0px 3px 6px 0px rgba(239, 129, 27, 0.10);
	--shadow-red: 0px 69px 19px 0px rgba(251, 49, 49, 0.00), 0px 44px 18px 0px rgba(251, 49, 49, 0.01), 0px 25px 15px 0px rgba(251, 49, 49, 0.05), 0px 11px 11px 0px rgba(251, 49, 49, 0.09), 0px 3px 6px 0px rgba(251, 49, 49, 0.10);
	--shadow-purple: 0px 69px 19px 0px rgba(140, 50, 255, 0.00), 0px 44px 18px 0px rgba(140, 50, 255, 0.01), 0px 25px 15px 0px rgba(140, 50, 255, 0.05), 0px 11px 11px 0px rgba(140, 50, 255, 0.09), 0px 3px 6px 0px rgba(140, 50, 255, 0.10);
	--shadow-card-primary: 0 2px 0 0 var(--clr-primary);
	--shadow-card-green: 0 2px 0 0 var(--clr-green);
	--shadow-card-blue: 0 2px 0 0 var(--clr-blue);
	--shadow-card-orange: 0 2px 0 0 var(--clr-orange);
	--shadow-card-red: 0 2px 0 0 var(--clr-red);
	--shadow-card-purple: 0 2px 0 0 var(--clr-purple);
	--shadow-card-text: 0 2px 0 0 var(--clr-text);
	--shadow-card-bg: 0 2px 0 0 var(--clr-bg);

}
/******************************************/
/*********  css/utilities/scroll.css  *********/
/******************************************/

/* Sets scroll properties for anchor tags */

html {
    scroll-behavior: smooth;
		scroll-padding: 0;
}

a[data-hs-anchor="true"] { 
/*     margin-top: -100px;  */
/*     position: absolute; */
}
/******************************************/
/*****  css/tools/editor-helpers.css  *****/
/******************************************/

/*======================
Not currently working. Intention is to show hidden sections inside editor so that people are aware they exist.
======================*/




/*======================
Only show an element in the page editor or module previewer.
======================*/
.editor-only {
  display: none;
	position: relative;
}



.editor-only:hover::after {
	content: "This won't be visible on the live page.";
	font-size: 0.75rem;
	margin-inline: auto;
	display: block;
	width: fit-content;
	position: absolute;
	bottom: -1rem;
	right: -100%;
	left: -100%;
}
/******************************************/
/**********  css/tools/_debug.css  ********/
/******************************************/


/* Debug */

.debug * {
	padding: 2px;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 :before {
  position: absolute;
	top: 0;
	left: 0;
	font-family: var(--monospace);
	font-size: .5rem;
	border: 1px solid var(--clr-stroke);
	color: var(--clr-bg);
	background: var(--clr-text);
}

.debug-2 * {
	padding: .5rem;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 *:before {
	content: "Level 1";
}

.debug-2 * > * {
  position: relative;
	background-color: rgba(0,50,50,.08);
	outline: 1px dashed rgba(0,50,0,.15);
}
.debug-2 * > *:before {
  content: "Level 2";
}
.debug-2 * > * > * {
  position: relative;
	background-color: rgba(40,10,40,.1);
	outline: 1px dashed rgba(40,0,0,.25);
}
.debug-2 * > * > *:before {
  content: "Level 3";
}

.debug-3 * {
	position: relative;
}

.debug-3 *:before {
  content: '';
	position: absolute;
  inset: 0;
	outline: 1px dashed rgba(0,20,20,.15);
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
}

.gridlines {
  height: 200vh;
  background-image: 
    repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
    repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
		repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem),
    repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem);
  background-color: var(--clr-bg-bg-2); /* Background color of the grid */
}

.spacer-500 {
  width: 100%;
  height: 500px;
}
.spacer-1000 {
	width:100%;
	height:1000px;
}

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

/******************************************/
/*********** css/generic/_reset.css ***********/
/******************************************/

/* Reset */
*, *::before, *::after {
	box-sizing: border-box;
}

* {
	padding: 0;
	font-family: inherit;
}

html {
	margin: 0;
}


body {
	min-height: 100vh; /* Prevent window resizing on iOS Safari */
	font-size: 18px; /* Set rem size */
	background-color: var(--clr-bg); /* Prevents weird issue where embedding the website in ClickUp set's the page's featured image as the background */
}

/* Makes graphics responsive  */
img, picture, svg, video {
	display:block;

}

/* Allows border on default image module */
.widget-type-linked_image {
	overflow: hidden;
}

.widget-type-custom_widget .widget-type-linked_image {
	overflow: unset;
}

input, textarea, button, select {
	font: inherit;
}
/******************************************/
/********* css/generic/_normalize.css *********/
/******************************************/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    font-size: 18px;
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * Add the correct box sizing in Firefox.
   */
  
  hr {
    box-sizing: content-box;
    height: 0;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 0.75rem;
		line-height: 0.75rem;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* List items
     ========================================================================== */
  ul {
    list-style-position: outside;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
  }
  
  li {
    margin-left: 2rem;
      margin-bottom: 1rem;
  }
  
  [role='menu'] li {
      margin-left: unset; 
      margin-bottom: unset;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Remove the inheritance of text transform in Edge and Firefox.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
   */
  
  legend {
    padding: 0;
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  :target::before { 
    content: ''; display: block; height: 150px; margin: -150px 0 0 0; 
  }

/* Objects
Non-cosmetic design patterns including grid and layout classes
*/

/******************************************/
/*********** css/objects/_layout.css **********/
/******************************************/

/* HubL Variables */



/* 1a. Containers */
    




/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
  --dnd-section-vertical-padding: var(--margin-block); /* DND sections */
  /* --max-width: px; */
  
}



/* Full width sections */
.dnd-section {
  padding-inline: var(--padding-inline);
  padding-block: var(--dnd-section-vertical-padding);
	overflow: clip;
}

.dnd-section > .row-fluid {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
	gap: var(--gap-m);
}

/* Collapse margins when container is at max width */
@media (min-width: 1200px) {
  :root {
	  --margin-inline: 0;
	}
}

/**** 1b. Widget Columns ****/

/* Space between modules inside columns */
@media (min-width: 768px) {
.dnd-column > *:not(:last-child) {
  margin-bottom: 1.5rem;
}
}

/* Makes manually resized column widths more consistent */
.dnd-column .widget-span {
  min-width: 0;
}

/* Removes space below text modules */
.hs_cos_wrapper_type_inline_rich_text > :last-child,
.hs_cos_wrapper_type_rich_text > :last-child,
p:last-child{
  margin-bottom: 0;
}

/* 2. Hard coded templates */

/* For non-drag-and-drop templates */
.content-wrapper {
  max-width: px;
	margin-inline: auto;
}
.dnd-section
.content-wrapper--vertical-spacing {
  padding: px 1rem;
}


/* 3a. Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
	gap: var(--gap-l);
  width: 100%;
	border-radius: var(--corner-l);
}

/* Adds selector for every column like this ".row-fluid .spanX" where X is the column number */


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

@media (max-width: 768px) {

.dnd-section > .row-fluid > .dnd-column {
  gap: var(--gap-m);
}

.dnd-section > .row-fluid > .dnd-column.widget-type-cell {
  gap: var(--gap);
}

.dnd-section > .row-fluid > .dnd-column.span6 {
/*   gap: var(--gap); */
}

.row-depth-1 > .row-fluid {
  gap: var(--gap-m);
}

.row-fluid {
  gap: var(--gap);
}

  .dnd-section {
		padding-inline: var(--padding-inline);
		padding-block: var(--dnd-section-vertical-padding);
		overflow: clip;
  }
	
  /* This is needed when columns get stacked on mobile */
	.row-fluid > .dnd-column {
		display: flex;
		flex-direction: column;
		gap: var(--gap-s);
	}
}
/* 3b. Desktop layout */

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

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
/******************************************/
/****** css/objects/_containers-dnd.css *******/
/******************************************/


/* Darken backgrounds in sections  */
    [class*="-background-image"] {
        position: relative; /* Clips content in container */
    }
    
    [class*="-background-image"]::before {
    content: ''; /* Allows ::before to become an empty div */
    position: absolute; /* Lets you position it */
    inset: 0;   /* Shorthand for top:0; bottom:0; left:0; right:0; */
    background-color: rgba(0,0,0,.); /* Black color and opacity is in theme settings */
    backdrop-filter: multiply; /* Magic dust */
    }
    
    [class*="-background-image"] > * {
        position: relative; /* Prevents other elements in container from being darkened */
    }


/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/******************************************/
/******  css/elements/_typography.css *****/
/******************************************/


/* Variables located in css/utilities/_variables.css */

/* Imports in css/utilities/_imports.css */



/* Set variables */


:root {

	

	--font-primary: 'Montserrat', 'Lexend', 'Roboto', sans-serif;
	--font-secondary: 'Inter', 'Open Sans', sans-serif;

	--font-monospace: 'Jetbrains Mono', monospace;
	--font-code: var(--font-monospace);

	--font-title: var(--font-primary);
	--font-body: var(--font-secondary);
	--font-button: var(--font-secondary);

	--font-icons: 'Material Symbols Outlined';

}
/* Begin font styles
========================================================================== */


:root {

	/* Smooth fonts */
	font-family: var(--font-body);
	font-smooth: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Dynamic font sizing variables */
	--font-size-base: 1rem;
	--font-size-clamp-min: 0.8rem;
	--font-size-clamp-val: .3vw;
	--font-size-clamp-max: 1.4rem;
	--font-size-ratio: 1;
}


/* Dynamic font sizing */


.huge {
--font-size-ratio: 6;
}
.massive {
--font-size-ratio: 12;
}

.small {
  font-size: 0.75rem;
}

.tiny {
  font-size: 0.5rem;
}

h1, .h1, .font-style-h1 {
--font-size-ratio: 3.5;
--font-size-clamp-min: 0.6rem;
}
h2, .h2, .font-style-h2 {
--font-size-ratio: 2.2;
--font-size-clamp-min: 0.7rem;
}
h3, .h3, .font-style-h3 {
--font-size-ratio: 1.45;
}
h4, .h4, .font-style-h4 {
--font-size-ratio: 1;
}
h5, .h5, .font-style-h5 {
--font-size-ratio: 0.8;

}
h6, .h6, .font-style-h6 {
--font-size-ratio: 1;
}
p, .p, li, li::marker {
--font-size-ratio: 0.75;
--font-size-clamp-min: 0.65rem;
--font-size-clamp-val: .2vw;
}


.huge, .massive,
h1, .h1, .font-style-h1,
h2, .h2, .font-style-h2,
h3, .h3, .font-style-h3,
h4, .h4, .font-style-h4,
h5, .h5, .font-style-h5,
h6, .h6, .font-style-h6,
p, 
li, 
li::marker {
	font-size: clamp(
		calc(var(--font-size-clamp-min) * var(--font-size-ratio)),
		calc(var(--font-size-base) + (var(--font-size-clamp-val) * var(--font-size-ratio))),
		calc(var(--font-size-clamp-max) * var(--font-size-ratio))
	);
}


/* Everything inherits font family */
* {
	font-family: inherit;
}


h1, .h1, .font-style-h1,
h2, .h2, .font-style-h2,
h3, .h3, .font-style-h3,
h4, .h4, .font-style-h4,
h5, .h5, .font-style-h5,
h6, .h6, .font-style-h6 {
	margin-top: 0;
	margin-bottom: var(--gap-s);
	text-wrap: balance;
}


h1, .h1, .font-style-h1 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: 1.15;
}

h2, .h2, .font-style-h2 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: 125%;
}

h3, .h3, .font-style-h3 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: 125%;
}

h4, .h4, .font-style-h4 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: 125%;
}

h5, .h5, .font-style-h5 {
	font-family: var(--font-title);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	line-height: 105%;
	margin-bottom: .5em;
}

h6, .h6, .font-style-h6 {
	font-family: var(--font-title); 
	font-weight: 500;
	line-height: 125%;
}

/* Links */
.hs_cos_wrapper_type_inline_rich_text a, 
.hs_cos_wrapper_type_rich_text a {
	color: var(--clr-primary);
	text-decoration: none;
}

/* .body-container-wrapper a {
	color: inherit;
} */

a {
 text-decoration: none;
 color: var(--clr-primary);
}


/* Text */

body {
	font-family: var(--font-body); 
	font-weight: 400;
	line-height: 1.4;
	color: var(--clr-text);
	text-wrap: pretty;
}

p {
	margin-top: 0;
	margin-bottom: var(--gap-s);
}


p:first-child {
	margin-top: 0;
}

.hs_cos_wrapper_type_inline_rich_text p, 
.hs_cos_wrapper_type_rich_text p {
/*   max-width: 70ch; */
}

li {
	margin-bottom: .5em;
	margin-left: 1.5em;
}

code {
	font-family: var(--font-code);
}


.inline-code {
  border: 1px solid var(--clr-stroke);
	border-radius: 2px;
	padding-inline: 2px;
}


strong {
	font-weight: 700;
}

small {
	font-size: .75rem;
}

em {
  font-style: italic;
}


/* Mobile Font Sizes. 
* Currently disabled by setting the media query to 1px */
@media (max-width: 1px) 
{
	h1 {
		font-size: 2.25rem; /* 36px */
	}
	h2 {
			font-size: 1.875rem; /* 30px */
	}
	h3 {
		font-size: 1.375rem; /* 22px */
	}
	h4 {
		font-size: 1.25rem; /* 20px */
	}
	h5 {
		font-size: 1.1rem; 
		/* Inherited: 
		* letter-spacing: 0.5rem;
		* 
		* */
	}
	h6 {
		font-size: 1.25rem; /* 20 */
		/* Inherited: 
		* font-weight: 400;
		* 
		* */
	}
	p {
		font-size: 1.125rem; /* 18px */
	}
}






/******************************************/
/**********  css/elements/_buttons.css  *******/
/******************************************/

/* CONTENTS
* 
* Buttons
* Fancy Links */



/**** Buttons ****/
button, .button, .hs-button, a.button {
	display: flex;
	align-items: center;
	gap: .5em;
	transition: all .15s ease;
/* 	background-color: var(--clr-primary);
	border: 2px solid var(--clr-primary);
	color: var(--clr-bg); */
	padding: 15px 2.5rem;
	border-radius: var(--corner-xxl);
	font-family: var(--font-buton);
	font-weight: bold;
	font-size: clamp(16px, 2vw, 1rem);
	--font-size-ratio: 1;
	font-size: var(--font-size-dynamic);
	max-width: fit-content;
	text-align: center;
}

button.unset {
	/* Resets button to its default browser state */
	display: initial;
	align-items: initial;
	gap: initial;
	padding: initial;
	border-radius: initial;
	font-family: initial;
	font-weight: initial;
	font-size: initial;
	font-size: initial;
	max-width: initial;
	text-align: initial;
}


button:active, .button:active, .hs-button:active, a.button:active {
  opacity: .8;
	scale: 0.98;
}

button.small, .button.small {
  padding: 8px 1rem;
	font-size: .8rem;
}

button.tiny, .button.tiny {
  padding: 2px .5rem;
	font-size: .75rem;
}

/* Primary */
.btn-primary {
	background-color: var(--clr-primary);
	border: 2px solid var(--clr-primary);
	color: var(--clr-white);
}

.button:hover, .btn-primary:hover, .hs-button:hover {
/* 	background-color: var(--clr-bg-primary); */
	background-color: rgb(from var(--clr-primary) r g b / 0.2);
	border-color: var(--clr-primary);
	color: var(--clr-primary);
}

.btn-primary-outlined, .btn-green-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-primary);
	background-color: transparent;
	color: var(--clr-primary);
}

.btn-primary-outlined:hover, .btn-green-outlined:hover {
	border-style: dashed;
	background-color: var(--clr-bg-primary);
	border-color: var(--clr-primary);
	color: var(--clr-primary);
}

/* Secondary */
.btn-secondary, button.btn-secondary {
	background-color: var(--clr-text);
	color: var(--clr-bg);
	border: 2px solid var(--clr-text);
}

.btn-secondary:hover, button.btn-secondary:hover {
	background-color: var(--clr-bg-2);
	border-color: var(--clr-text);
	color: var(--clr-text);
}
.btn-secondary-outlined, button.btn-secondary-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-text);
	background-color: transparent;
	color: var(--clr-text);
}

.btn-secondary-outlined:hover, button.btn-secondary-outlined:hover {
	color: var(--clr-text);
	background-color: var(--clr-text-transparent);
	border-style: dashed;
	border-color: var(--clr-text);
	color: var(--clr-text);
}

/* White */
.btn-white {

	background-color: var(--clr-white);
	color: var(--clr-primary);
	border: 2px solid var(--clr-white);
}

.btn-white-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-white);
	background-color: transparent;
	color: var(--clr-white);
}

.btn-white-outlined:hover {
	border-style: dashed;
	border-color: var(--clr-white);
	background-color: var(--clr-bg-transparent);
	border-color: var(--clr-white);
	color: var(--clr-white);
}


/* Green - use if primary color has changed */ 
.btn-green {
	background-color: var(--clr-green);
	border: 2px solid var(--clr-green);
	color: var(--clr-white);
}


/* Blue */
.btn-blue {

	background-color: var(--clr-blue);
	border: 2px solid var(--clr-blue);
	color: var(--clr-white);
}

.btn-blue:hover {
	background-color: var(--clr-bg-blue);
	border-color: var(--clr-blue);
	color: var(--clr-blue)
}

.btn-blue-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-blue);
	background-color: transparent;
	color: var(--clr-blue);
}

.btn-blue-outlined:hover {
	border-style: dashed;
	background-color: var(--clr-bg-blue);
	border-color: var(--clr-blue);
	color: var(--clr-blue);
}

/* Orange */
.btn-orange {
	background-color: var(--clr-orange);
	border: 2px solid var(--clr-orange);
	color: var(--clr-white);
}

.btn-orange:hover {
	background-color: var(--clr-bg-orange);
	border-color: var(--clr-orange);
	color: var(--clr-orange);
}


.btn-orange-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-orange);
	background-color: transparent;
	color: var(--clr-orange);
}


.btn-orange-outlined:hover {
	border-style: dashed;
	background-color: var(--clr-bg-orange);
	border-color: var(--clr-orange);
	color: var(--clr-orange);
}

/* Red */
.btn-red {
	background-color: var(--clr-red);
	border: 2px solid var(--clr-red);
	color: var(--clr-white);
}

.btn-red:hover {
	background-color: var(--clr-bg-red);
	border-color: var(--clr-red);
	color: var(--clr-red)
}


.btn-red-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-red);
	background-color: transparent;
	color: var(--clr-red);
}

.btn-red-outlined:hover {
	border-style: dashed;
	background-color: var(--clr-bg-red);
	border-color: var(--clr-red);
	color: var(--clr-red);
}

/* purple */
.btn-purple {
	background-color: var(--clr-purple);
	border: 2px solid var(--clr-purple);
	color: var(--clr-white);
}

.btn-purple:hover {
	background-color: var(--clr-bg-purple);
	border-color: var(--clr-purple);
	color: var(--clr-purple);
}


.btn-purple-outlined {
	box-sizing: border-box;
	border-width: 2px;
	border-style: solid;
	border-color: var(--clr-purple);
	background-color: transparent;
	color: var(--clr-purple);
}

.btn-purple-outlined:hover {
	border-style: dashed;
	background-color: var(--clr-bg-purple);
	border-color: var(--clr-purple);
	color: var(--clr-purple);
}



/* Typeform popup button */
[data-tf-hubspot] {
	all: unset;
	display: flex !important;
	align-items: center !important;
	gap: .5em !important;
	transition: all .15s ease !important;
	background-color: var(--clr-primary) !important;
	border: 2px solid var(--clr-primary) !important;
	color: var(--clr-bg) !important;
	padding: 0 2.5rem !important;
	border-radius: var(--corner-xxl) !important;
	font-family: var(--font-buton) !important;
	font-weight: bold !important;
	font-size: clamp(16px, 2vw, 1rem) !important;
	max-width: fit-content !important;
	text-align: center !important;
}

[data-tf-hubspot]:hover {
	color: var(--clr-primary) !important;
	background-color: var(--clr-bg-primary) !important;
}

[data-tf-hubspot]::after {
	content: " quiz";
	font-family: var(--font-icons);
	font-variation-settings: 
		'FILL' 1,
		'OPSZ' 48,
		'GRAD' 0,
		'wght' 900;
}
/******************************************/
/********  css/elements/_forms.css  *******/
/******************************************/


/* Container */
.hs-form {
	position: relative;
	z-index: 2;
	max-width: 575px;
	padding: var(--block) var(--inline);
	border: 1px solid var(--clr-primary);
	border-radius: var(--corner);

	background-color: var(--clr-bg-2);
	box-shadow: var(--shadow-light);
}

.hs-form fieldset {
	max-width: unset !important;
}

/* Labels */
.hs-form label {

	margin-bottom: 8px;
	display: block;
	color: var(--clr-text);
}

label span {
	line-height: 1.3;
}

/* Text Inputs and Textarea */
.hs-form input.hs-input,
.hs-input,
.hs-form input[type="text"], 
.hs-form input[type="email"], 
.hs-form textarea,
.hs-form select {
	width: 100% !important;
	padding: 10px;
	margin-bottom: var(--gap);
	border: 1px solid var(--clr-stroke-2);
	color: var(--clr-text);
	background-color: var(--clr-bg-transparent-50);
	border-radius: var(--corner-s);
}

.inputs-list {
	list-style: none;
}

.inputs-list li {
	margin-left: 0px;
}


/* Radio selectors */
li.hs-form-radio {
	display: flex;
	align-items: center; /* Vertically center align the items in the list */
	margin-bottom: .5em; /* Maintain the bottom margin as per your style */
}

.hs-form-radio label {
	display: flex;
	align-items: center; /* Align radio button and label text */
}

.hs-form-radio input[type="radio"] {
	margin: 0;
	width: auto !important; /* Keep the radio button size consistent */
	padding: 0; /* Remove padding to prevent layout issues */
}

input[type='radio'] ~ span {
	display: block; /* Make the span fill the width of the label */
	margin-left: 0.5rem; /* Space between the radio button and the text */
}

/* Dropdown select */

.hs-form .input select {
	margin-bottom: .5rem;
}


/* Checkboxes */
.hs-form label.hs-form-booleancheckbox-display {
	display: flex;
	align-items: center;
}

input.hs-input[type="checkbox"] {
	width: auto !important;
	/* 	margin-right: .625rem; */
	margin: 0;
}

input[type='checkbox'] {
	margin: 0;
	margin-right: .5ch;
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
	border: 1px solid var(--clr-stroke-2);
}

/* Rich text */
.hs-richtext {
	margin-bottom: 1rem;
}


/* Submit Button */
.hs-form input[type="submit"] {
	background-color: var(--clr-primary);
	color: var(--clr-white);
	font-weight: bold;
	font-family: var(--font-body);
	padding: 15px 40px;
	border: none;
	cursor: pointer;
	margin-top: var(--gap-s)
}

/* Hover effect for Submit Button */
.hs-form input[type="submit"]:hover {
	opacity: .95;
}

/* Legal consent text */
.legal-consent-container .hs-richtext {
	font-size: 0.7rem;
	color: var(--clr-text);
}

/* Confirmation message */
.hs_cos_wrapper_type_form .submitted-message {
	color: var(--clr-text);
}

/* Error messages */
.hs-form .hs-error-msgs {
	margin: 0; 
	padding-left: 0;
	margin-bottom: 1rem;
}

.hs-form .hs-error-msgs li {
	/*   margin-left: 1rem; */
	margin-left: 0;
	padding-bottom: .5rem;
}
.hs-form .hs-error-msg {
	color: var(--clr-red);
}

.hs-form .hs-error-msgs li::marker {
	color: var(--clr-red);
	margin: 0;
}


/*
==========================================
==========================================
New Forms Module
==========================================
==========================================
*/


/* Container */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-Step {
	background-color: var(--clr-primary-bg-opaque);
	border: 2px solid var(--clr-primary);
	border-radius: var(--corner);
	position: relative;
	z-index: 2;
	font-family: var(--font-body);
	font-size: 1rem;
}

[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-Step .hsfc-Step__Content {
	padding: var(--block) var(--inline);
}


/* Rich text */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-RichText {
	color: var(--clr-text);
}


/* Fields */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-FieldLabel>span {
	color: var(--clr-text);
	font-size: 1rem;
}

[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-TextInput {
	background-color: var(--clr-bg-transparent-50);
	border: 1px solid var(--clr-stroke-2);
	border-radius: var(--corner-s);
	color: var(--clr-text);
	padding: 10px;
	width: 100% !important;
}


/* Dropdowns */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-DropdownOptions {
	background-color: var(--clr-bg);
	border: 1px solid var(--clr-stroke-2);
	box-shadow: var(--shadow);
	border-radius: var(--corner-s);

}
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-DropdownOptions__List {
	padding: 1rem;
}
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-DropdownOptions__List__ListItem {
	color: var(--clr-text);
	background-color: var(--clr-bg-bg-2);
	margin-left: 0;
	border-radius: var(--corner-s);
}

/* Button */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-Button {
	border-radius: 999px;
	background-color: var(--clr-primary);
	color: var(--clr-white);
	font-weight: bold;
	font-family: var(--font-body);
	padding: 15px 40px;
	border: none;
	cursor: pointer;
	margin-top: var(--gap-s)
}
/******************************************/
/********  css/elements/_tables.css  ******/
/******************************************/



	table {
	  border-collapse: separate;
		border-spacing: 0; /* Removes default gap between cells */
		border: 1px solid var(--clr-gray-70);
		border-radius: 0.5rem;
	}
	
	th, td {
	padding: 0.25rem;
	}
	
	/* Inner Borders */
	th:not(:last-child) {
		border-right: 1px dashed var(--clr-stroke-2);
	}

	td:not(:last-child) {
		border-right: 1px dashed var(--clr-stroke-2);
	}
	tr:not(:last-child) td, th {
		border-bottom: 1px dashed var(--clr-stroke-2);
	}
/******************************************/
/********  css/elements/elements.css ******/
/******************************************/



/* CONTENTS
* 
* Body background
* Skip to content link
* Box styles
* Fancy links
* Dividers
* Accordions
* Tooltips
* Cookie consent banner
* JazzHR Embed */

/*======================
Body Background
======================*/

/* Enable Body background color for light and dark modes */
body {
/* intentionally blank */
}

.dark-mode body {
	background-color: var(--clr-bg);
}


/* Give rounded corners to dnd rows/columns with background color */
.widget-type-cell[class*="background"] {
	border-radius: var(--corner);
	/* 	box-shadow: var(--shadow-lighter); */
	/* 	border: 1px solid var(--clr-stroke); */
}

/*======================
Skip to content link
======================*/

.skip-to-content-link {
  background: var(--clr-bg);
	color: var(--clr-primary);
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}


/*======================
Quick Box Style Presets
======================*/

.alert {
	display: flex; 
	align-items: center; 
	gap: var(--gap-xs); 
	width: fit-content;
	padding: var(--gap-xs); 
	margin-inline: auto;
	margin-bottom: var(--block);
	color: var(--clr-red);
	background-color: var(--clr-bg-red); 
	border: 1px dashed var(--clr-red); 
	border-radius: var(--corner);
}

.chip {
	background: var(--clr-primary-bg);
	color: var(--clr-text);
	padding: 0.25rem 0.5rem;
	border-radius: 7.5rem;
	width: fit-content;
	vertical-align: middle;
	line-height: 1;
	font-family: var(--font-body);
	--font-size-ratio: 0.5;
	font-size: clamp(
		calc(var(--font-size-clamp-min) * var(--font-size-ratio)),
		calc(var(--font-size-base) + (var(--font-size-clamp-val) * var(--font-size-ratio))),
		calc(var(--font-size-clamp-max) * var(--font-size-ratio))
	);
	font-weight: 700;
}

.badge {
	background: var(--clr-primary);
	color: var(--clr-white);
	padding: 0.25rem 0.5rem;
	border-radius: .25rem;
	vertical-align: middle;
	line-height: 1em;
	width: fit-content;
}

.card {
	padding: var(--block) var(--inline);
	border-radius: var(--corner);
	border: 1px solid var(--clr-stroke);
	background-color: var(--clr-bg-2);
	box-shadow: var(--shadow-lighter);
}



/*======================
Fancy Links
======================*/

.fancy-link, .fancy-link-reverse {
	font-weight: bold;
		--font-size-ratio: .75;
		font-size: clamp(
		calc(var(--font-size-clamp-min) * var(--font-size-ratio)),
		calc(var(--font-size-base) + (var(--font-size-clamp-val) * var(--font-size-ratio))),
		calc(var(--font-size-clamp-max) * var(--font-size-ratio))
	);
}

.fancy-link::after {
	font-family: var(--font-icons);
	font-size: 1em;
	content: 'arrow_forward';
	line-height: .5em;
	vertical-align: middle;
	padding-left: .25em;
}

.fancy-link-reverse::before {
	font-family: var(--font-icons);
	font-size: 1em;
	content: 'arrow_back';
	line-height: .5em;
	vertical-align: middle;
	padding-left: .25em;
}

.fancy-link-wrapper {
	width: fit-content;
}

.fancy-link-wrapper::after {
	display: block;
	content: '';
	background-color: attr(data-line-color);
	width: 0;
	height: 2px;

	margin-top: 2px;
	margin-right: auto;
	transition: width .2s ease;
}

.fancy-link-wrapper:hover::after {
	width: 100%;
}


/*======================
Dividers
======================*/
hr, .divider {
	border: none;
	height: 1px;
	width: 100%;
	background-image: linear-gradient(
		to right,
		var(--clr-primary) 0%, 
		var(--clr-primary) 40%, 
		transparent 40%, 
		transparent 100%);
	background-size: 16px;
	background-position: center;
	background-repeat: repeat;
}

hr {
	--clr-primary: var(--clr-secondary);
}

/*======================
Accordions 
 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
======================*/

summary {
	display: flex;
	align-items: center;
	gap: .5em;
}
summary::before {
	color:var(--clr-text);
	font-family: var(--font-icons);
	font-variation-settings: var(--font-variation-settings-24);
	content: "expand_more";
/* 	content: "add"; */
	transition: all .15s ease;
	transform-origin: center 48%;
	font-size: 32px;
}

details[open] summary::before {
	color: var(--clr-text);	
	transform: rotate(180deg);
/* 		content: "remove"; */
}


summary::-webkit-details-marker {
	display: none;
}

/*======================
Tooltips

Usage:
		<span class="tooltip">
			<span class="label">Hover me</span>
			<div class="tooltip-content">
				I'm a cooltip. 😎
			</div>
		</span>
		
======================*/

.tooltip {
  position: relative;
	cursor: default;
}

.tooltip .tooltip-content {
	display: none;
	pointer-events: none;
	position: absolute;
	bottom: 100%;
	width: 100vw;
	max-width: 225px;
	padding: 0.5rem;
	border: 1px solid var(--clr-stroke-2);
	background: var(--clr-bg);
	border-radius: 4px;
	box-shadow: var(--shadow-lighter);
	opacity: 0;
	transition: all 150ms ease-out;
	z-index: 5;
}


.tooltip:hover .tooltip-content {
  display: block;
	opacity: 1;
	left: 0;
}




/*======================
Cookie consent banner
======================*/

#hs-banner-parent #hs-eu-cookie-confirmation {
  position: fixed;
  inset: unset;
  bottom: 0px;
  left: 0;
  max-width: 50%;
  margin: 0;
  width: unset;
  transform: unset;
  --webkit-transform: unset;
  margin: 1rem;
}


#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
  padding: var(--block);
  flex-direction: row;
  align-items: center;
}

#hs-eu-confirmation-button {
  padding: .25rem 2rem;
  min-height: unset;
  height: unset;
  width: unset;
  min-width: unset;
}




/*======================
JazzHR Resumator Embed
======================*/
#resumator-widget {
	background-color: var(--clr-bg);
	padding: var(--block) var(--inline);
	border-radius: var(--corner-l);

}

.resumator-job .resumator-jobs-text.resumator-job-title {
	border-top: 1px dashed var(--clr-green);
	padding-top: 1rem;
	font-family: var(--font-primary);
	color: var(--clr-title);
}

.resumator-job:first-child .resumator-jobs-text {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.resumator-job-info, .resumator-job-info * {
	font-family: var(--font-body);
	font-size: .8rem;
	color: var(--clr-text) !important;
	padding-bottom: .5rem;

}

.resumator-job-link {
	font-family: var(--font-body);
	font-size: .8rem;
}
/******************************************/
/******  css/elements/effects.css ********/
/******************************************/


/* Filters */

.blur {
	-moz-backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.multiply {
	-moz-mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
	mix-blend-mode: multiply;
}

/* Shadows */
.shadow { box-shadow: var(--shadow); }
.shadow-light, 
.shadow-2 {box-shadow: var(--shadow-light);}
.shadow-menu, 
.shadow-3 {box-shadow: var(--shadow-menu);}
.shadow-green {box-shadow: var(--shadow-green);}
.shadow-blue {box-shadow: var(--shadow-blue);}
.shadow-orange {box-shadow: var(--shadow-orange);}
.shadow-red {box-shadow: var(--shadow-red);}
.shadow-purple {box-shadow: var(--shadow-purple);}
/******************************************/
/*********** css/elements/svg.css *************/
/******************************************/


.svg-bg-2 {
  fill: var(--clr-bg-2);
}
/******************************************/
/********  css/elements/icons.css  ********/
/******************************************/



:root{

	--icon-filled: 
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	--icon-outlined: 
		'FILL' 0,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	--font-variation-settings: var(--icon-filled);
}

.icon {
	font-family: var(--font-icons);
	font-size: 24px;
	position: relative;
	font-variation-settings: var(--font-variation-settings)
}
.icon::before {
	font-family: var(--font-icons);
	content: attr(data-icon);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .2;
}
.icon.outlined {
	font-variation-settings: var(--icon-outlined);
}



/* Specific sizes */

:root {

	--font-variation-settings-20:
	'FILL' 1,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24;
}



.icon-20 {
	font-family: var(--font-icons);
	font-size: 20px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-20);
}
.icon-20::before {
	font-family: var(--font-icons);
	font-size: 20px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	
	display: none;
	
}


:root {

	--font-variation-settings-24:
	'FILL' 1,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24;
}



.icon-24 {
	font-family: var(--font-icons);
	font-size: 24px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-24);
}
.icon-24::before {
	font-family: var(--font-icons);
	font-size: 24px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	
	display: none;
	
}


:root {

	--font-variation-settings-32:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 48;
}



.icon-32 {
	font-family: var(--font-icons);
	font-size: 32px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-32);
}
.icon-32::before {
	font-family: var(--font-icons);
	font-size: 32px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	
}


:root {

	--font-variation-settings-48:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 48;
}



.icon-48 {
	font-family: var(--font-icons);
	font-size: 48px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-48);
}
.icon-48::before {
	font-family: var(--font-icons);
	font-size: 48px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 48;

	
}


:root {

	--font-variation-settings-60:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 48;
}



.icon-60 {
	font-family: var(--font-icons);
	font-size: 60px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-60);
}
.icon-60::before {
	font-family: var(--font-icons);
	font-size: 60px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 200,
		'GRAD' 0,
		'opsz' 48;

	
}


:root {

	--font-variation-settings-120:
	'FILL' 0,
	'wght' 100,
	'GRAD' 0,
	'opsz' 48;
}



.icon-120 {
	font-family: var(--font-icons);
	font-size: 120px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-120);
}
.icon-120::before {
	font-family: var(--font-icons);
	font-size: 120px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 100,
		'GRAD' 0,
		'opsz' 48;

	
}


/******************************************/
/*********** css/elements/video.css ***********/
/******************************************/


.hs-video-wrapper iframe {
  border-radius: .5rem;
	border: 1px solid var(--clr-stroke);
	box-shadow: var(--shadow-lighter);
}

.oembed_container,
.oembed_custom-thumbnail, 
.oembed_custom-thumbnail:active, 
.oembed_custom-thumbnail:focus, 
.oembed_custom-thumbnail:hover {
  border-radius: .5rem !important;
	box-shadow: var(--shadow-lighter);
}


button.oembed_custom-thumbnail {
  gap: unset;
  max-width: unset;
}

.oembed_container .iframe_wrapper {
  border-radius: .5rem;
  overflow: hidden;
}

.w-vulcan--background.w-css-reset {
z-index: 0;
}


/* Prevents Wistia from causing page overflow */
.wistia_embed {
	max-width: 100%;
}

@media (max-width: 768px) {

	.wistia_embed {
		width: 100% !important;
	}
}
    

/* Utility classes 
Bootleg Tailwind. Shortcuts for quick styles like display modes, layouts, paddings, etc.
*/
/******************************************/
/*****  css/utilities/utility-classes.css  ****/
/******************************************/

/* Visibility */
.hidden { display: none !important;}
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.hide-scrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none;  /* Internet Explorer/Edge */}
.hide-scrollbar::-webkit-scrollbar {display: none;} /* Chrome, Safari, Edge */

/* Breakpoints */
.mobile, .hidden-desktop {
	@media (min-width: 768px) { display: none !important; }
}
.desktop, .hidden-desktop {
	@media (max-width: 768px) {
		display: none !important; }
}

/******* Styles *******/

.dashed, [class$='-dashed'] { border-style: dashed !important; }
.corner, .corners, .rounded { border-radius: var(--corner); }
.circle, .round {border-radius: 9999px; }
.rounded-l, .corner-l, .corners-l { border-radius: var(--corner-l); }
.border { border: 2px solid var(--clr-stroke); }
.border-2 { border: 2px solid var(--clr-stroke-2); }

/* Typography */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.underline { text-decoration: underline; }
.bold { font-weight: bold; }
.italic { font-style: italic; }




/******* Layouts *******/

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.margin-auto { margin-inline: auto; }
.fit-content {max-width: fit-content;}


/* Block */
.block.center { text-align: center; }
.block.middle { align-content: center; }

/* Flexbox */
.flex { display: flex; }
.flex.row { flex-direction: row; }
.flex.column { flex-direction: column; }
.flex.row.reverse { flex-direction: row-reverse; }
.flex.column.reverse { flex-direction: column-reverse; }
.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }

/* Flex Stacking */
.flex.stack { flex-direction: row; }
@media (max-width: 678px) {
	.flex.stack { flex-direction: column; }
	.flex.stack.reverse { flex-direction: column-reverse; }
}

/* Flex alignment */
.flex.wrap { flex-wrap: wrap; }
.flex.nowrap { flex-wrap: nowrap; }
.flex.stretch { align-items: stretch; }
.flex.middle { align-items: center; }
.flex.align-start {align-items: flex-start;}
.flex.align-end {align-items: flex-end;}
.flex.center { justify-content: center; }
.flex.space-between { justify-content: space-between; }
.flex.space-around { justify-content: space-around; }
.flex.align-start {align-items: flex-start;}
.grid.align-center { align-items: center; }
.flex.align-end {align-items: flex-end;}


/* Grid */
.grid { display: grid; }
.grid.center { place-items: center; }
.grid.cols-auto {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
.grid.rows-auto {grid-auto-rows: 1fr;}
.grid.cols-1 { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.grid.cols-8 { grid-template-columns: repeat(8, 1fr); }
.grid.cols-9 { grid-template-columns: repeat(9, 1fr); }
.grid.cols-10 { grid-template-columns: repeat(10, 1fr); }
.grid.cols-11 { grid-template-columns: repeat(11, 1fr); }
.grid.cols-12 { grid-template-columns: repeat(12, 1fr); }
.grid.space-between { align-content: space-between; }
.grid.stack { @media (max-width: 768px) { grid-template-columns: 1fr !important; }}
.grid.space-between { align-content: space-between; }
.grid.align-start { align-items: start; }
.grid.align-end { align-items: end; }
.grid.align-center { align-items: center; }
.grid.align-stretch { align-items: stretch; }
.grid.justify-start { justify-content: start; }
.grid.justify-end { justify-content: end; }
.grid.justify-center { justify-content: center; }
.grid.justify-stretch { justify-content: stretch; }


/* Gaps */
.gap-xxs { gap: var(--gap-xxs);}
.gap-xs { gap: var(--gap-xs);}
.gap-s { gap: var(--gap-s);}
.gap { gap: var(--gap);}
.gap-m { gap: var(--gap-m);}
.gap-l { gap: var(--gap-l);}
.gap-xl { gap: var(--gap-xl);}
.gap-xxl { gap: var(--gap-xxl);}
gap {all: unset; display: block; height: var(--gap);} /* For this one you can just use <gap></gap> and it will give you a quick lil vertical gap. */

/* Padding - Expand to see classes*/
@media (min-width: 1px) {
	.pad-0 {padding: 0;}
	.pad-xs {padding: var(--gap-xs);}
	.pad-s {padding: var(--gap-s);}
	.pad {padding: var(--gap);}
	.pad-m {padding: var(--gap-m);}
	.pad-l {padding: var(--gap-l);}
	.pad-xl {padding: var(--gap-xl);}
	.pad-y-xs {padding-block: var(--gap-xs);}
	.pad-y-s {padding-block: var(--gap-s);}
	.pad-y {padding-block: var(--gap);}
	.pad-y-m {padding-block: var(--gap-m);}
	.pad-y-l {padding-block: var(--gap-l);}
	.pad-y-xl {padding-block: var(--gap-xl);}
	.pad-x-xs {padding-inline: var(--gap-xs);}
	.pad-x-s {padding-inline: var(--gap-s);}
	.pad-x {padding-inline: var(--gap);}
	.pad-x-m {padding-inline: var(--gap-m);}
	.pad-x-l {padding-inline: var(--gap-l);}
	.pad-x-xl {padding-inline: var(--gap-xl);}
}

/* Margin - Expand to see classes*/
@media (min-width: 1px) {
	.margin-0 {margin: 0;}
	.margin-xs {margin: var(--gap-xs);}
	.margin-s {margin: var(--gap-s);}
	.margin {margin: var(--gap);}
	.margin-m {margin: var(--gap-m);}
	.margin-l {margin: var(--gap-l);}
	.margin-xl {margin: var(--gap-xl);}
	.margin-y-xs {margin-block: var(--gap-xs);}
	.margin-y-s {margin-block: var(--gap-s);}
	.margin-y {margin-block: var(--gap);}
	.margin-y-m {margin-block: var(--gap-m);}
	.margin-y-l {margin-block: var(--gap-l);}
	.margin-y-xl {margin-block: var(--gap-xl);}
	.margin-x-xs {margin-inline: var(--gap-xs);}
	.margin-x-s {margin-inline: var(--gap-s);}
	.margin-x {margin-inline: var(--gap);}
	.margin-x-m {margin-inline: var(--gap-m);}
	.margin-x-l {margin-inline: var(--gap-l);}
	.margin-x-xl {margin-inline: var(--gap-xl);}
}









/* Screen Reader
*	Improved screen reader only CSS class
@author Gaël Poupard
@note Based on Yahoo!'s technique
@author Thierry Koblentz
@see https://www.cssmojo.com/hide-content-from-sighted-users/
* 1.
@note `clip` is deprecated but works everywhere
@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
* 2.
@note `clip-path` is the future-proof version, but not very well supported yet
@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
@see http://caniuse.com/#search=clip-path
@author Yvain Liechti
@see https://twitter.com/ryuran78/status/778943389819604992
* 3.
@note preventing text to be condensed
author J. Renée Beach
@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
@note Drupal 8 goes with word-wrap: normal instead
@see https://www.drupal.org/node/2045151
@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
* 4.
@note !important is important
@note Obviously you wanna hide something
@author Harry Roberts
@see https://csswizardry.com/2016/05/the-importance-of-important/
*/

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

/*
Use in conjunction with .sr-only to only display content when it's focused.
@note Useful for skip links 
@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@note Based on a HTML5 Boilerplate technique, included in Bootstrap
@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
@author Sylvain Pigeard
@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}


/* Debug */

.debug * {
	padding: 2px;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 :before {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--monospace);
	font-size: .5rem;
	border: 1px solid #ccc;
	color: white;
	background: var(--clr-text);
}

.debug-2 * {
	padding: .5rem;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 *:before {
	content: "Level 1";
}

.debug-2 * > * {
	position: relative;
	background-color: rgba(0,50,50,.08);
	outline: 1px dashed rgba(0,50,0,.15);
}
.debug-2 * > *:before {
	content: "Level 2";
}
.debug-2 * > * > * {
	position: relative;
	background-color: rgba(40,10,40,.1);
	outline: 1px dashed rgba(40,0,0,.25);
}
.debug-2 * > * > *:before {
	content: "Level 3";
}

.debug-3 * {
	position: relative;
}

.debug-3 *:before {
	content: '';
	position: absolute;
	inset: 0;
	outline: 1px dashed rgba(0,20,20,.15);
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
}

.debug-4 * {
	padding: 0.5rem;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.gridlines {
  height: 200vh;
  background-image: 
    repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
    repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
		repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem),
    repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem);
  background-color: var(--clr-bg-bg-2); /* Background color of the grid */
}