* {
		/* Resets */
		margin: 0;
		padding: 0;
		box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
/* 		color: var(--color-primary-black); */

		/* Colors */
		--color-white: #ffffff;
		--color-primary-black: #1c242c;
		--color-primary-red: #cf2a2e;
		--color-primary-gray: #758491;

		--color-secondary-dark-gray: #425464;
		--color-secondary-light-gray: #c2c5c9;

		--color-accent-blue: #0091ba;

		--color-web-lightest-gray: #eff0f0;

		/* Settings */
		--max-width: 1400px;
		--max-text-width: 600px;
		--max-text-width-wide: 700px;
		--page-padding-width: 96px;
		--page-padding-height: 128px;
	}

em {
  font-style: normal;
}

	/* Grids */
	.grid-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-3,
	.grid-3-extreme {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	/* Swiper.js grid fix */
	.grid-2 *,
	.grid-3 *,
	.grid-4 * {
		min-width: 0;
	}

	/* Text */
	* {
		font-weight: 400;
	}
	*.medium,
	*.semi {
		font-weight: 500;
	}
	*.bold {
		font-weight: 700;
	}
	h1,
	text-h1,
	.h1 {
		font-size: 56px;
		line-height: 64px;
	}
	h2,
	text-h2,
	.h2 {
		font-size: 48px;
		line-height: 56px;
	}
	h3,
	text-h3,
	.h3 {
		font-size: 32px;
		line-height: 40px;
	}
	h4,
	text-h4,
	.h4 {
		font-size: 24px;
		line-height: 32px;
		color: var(--color-secondary-dark-gray);
	}
	h5,
	text-h5,
	.h5 {
		font-size: 20px;
		line-height: 24px;
	}

	p.large {
		font-size: 16px;
		line-height: 28px;
	}

	p.medium {
		font-size: 14px;
		line-height: 24px;
	}

	p.small,
	.small {
		font-size: 12px;
		line-height: 16px;
	}

	p.caption-m,
	.caption-m {
		font-weight: 700;
		font-size: 14px;
		line-height: 16px;
    letter-spacing: 0.12em;
	}

	p.caption-s,
	.caption-s {
		font-size: 12px;
		line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
	}

	p.subhead,
	.subhead {
		font-size: 14px;
		line-height: 140%;
		font-weight: 700;
		color: var(--color-primary-red);
		text-transform: uppercase;
    letter-spacing: 0.12rem;
	}

	a {
		text-decoration: none;
		width: fit-content;
	}

  .rich-text ul {
    margin-top: 12px;
  }

  .rich-text ul li {
    margin-left: 20px;
    margin-bottom: 12px;
  }

  .rich-text ul li::marker {
    margin-left: 20px;
  }

	/* Elements */
	button, .button {
    letter-spacing: 0.14em;

		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 16px;
		height: 44px;
		border-radius: 4px;
		outline: none;
		text-transform: uppercase;
		cursor: pointer;

		font-size: 12px;
		line-height: 16px;
		font-weight: 700;

		color: var(--color-white);
		background-color: var(--color-primary-black);
		border: 1px solid var(--color-primary-black);
    
    transition: 0.3s;
	}

/* Primary */
    a.light,
	button.light {
		color: var(--color-primary-black);
		background-color: var(--color-secondary-light-gray);
		border-color: var(--color-secondary-light-gray);
	}

    a.red,
	button.red {
		color: white;
		background-color: var(--color-primary-red);
		border-color: var(--color-primary-red);
	}

    a.blue,
	button.blue {
		color: white;
		background-color: var(--color-accent-blue);
		border-color: var(--color-accent-blue);
	}

	/* Secondary */
    a.secondary,
	button.secondary {
		background-color: transparent;
		border: 1px solid var(--color-primary-gray);
		color: var(--color-primary-black);
	}

    a.secondary.light,
	button.secondary.light {
		color: white;
		background-color: transparent;
		border: 1px solid var(--color-secondary-light-gray);
	}

  button:hover,
  .button:hover{
    opacity: 0.8;
  }
/*   button.secondary:hover,
  .button.secondary:hover{
    background-color: var(--color-primary-gray);
    color: white;
  }
  button.secondary.light:hover,
  button.secondary.light:hover{
    opacity: 1;
    background-color: var(--color-secondary-light-gray);
    color: var(--color-primary-black);
  } */

	.desktop {
		display: block;
	}
  .desktop2 {
		display: block;
	}
	.mobile {
		display: none;
	}
  .mobile2 {
		display: none;
	}

	@media (max-width: 1200px) {
		.grid-4 {
			grid-template-columns: 1fr 1fr 1fr;
		}
    .desktop2 {
			display: none;
		}
		.mobile2 {
			display: block;
		}
	}
	@media (max-width: 1000px) {
		.grid-2 {
			grid-template-columns: 1fr;
			align-items: center;
			justify-content: center;
		}
		.grid-3 {
			grid-template-columns: 1fr 1fr;
		}
		.grid-3-extreme {
			grid-template-columns: 1fr;
		}
		.grid-4 {
			grid-template-columns: 1fr 1fr;
		}
		.desktop {
			display: none;
		}
		.mobile {
			display: block;
		}
	}
	@media (max-width: 700px) {
		* {
			--page-padding-width: 24px;
			--page-padding-height: 64px;
		}
		.grid-3 {
			grid-template-columns: 1fr;
		}
		.grid-4 {
			grid-template-columns: 1fr;
		}
	}

	/* Joe Grid */
	:root {
		--grid-gap: 24px;
		--grid-gap-desktop: 24px;
		--grid-padding: 24px;
		--grid-padding-desktop: 96px;
		--pad: 24px;
		--pad-desktop: 24px;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		gap: var(--grid-gap);
		padding-left: var(--grid-padding);
		padding-right: var(--grid-padding);
		width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
	}

  .maxwidth {
    max-width: var(--max-width);
    margin: 0 auto !important;   
  }

	.pad-top,
	.pad {
		padding-top: var(--pad);
	}

	.pad-bottom,
	.pad {
		padding-bottom: var(--pad);
	}

	/* Grid @ 1000px */
	@media (min-width: 1000px) {
		.grid {
			grid-template-columns: repeat(12, 1fr);
			gap: var(--grid-gap-desktop);
			padding-left: var(--grid-padding-desktop);
			padding-right: var(--grid-padding-desktop);
		}

		.pad {
			padding-top: var(--pad-desktop);
			padding-bottom: var(--pad-desktop);
		}

		.pad-top {
			padding-top: var(--pad-desktop);
		}

		.pad-bottom {
			padding-bottom: var(--pad-desktop);
		}
	}

	/* Inputs */
	input {
		width: 100%;
		min-height: 44px;
		border-radius: 4px;
		background-color: var(--color-white);
		outline: none;
		border: none;

		padding: 0 16px;
		font-size: 16px;
		line-height: 28px;
		color: var(--color-primary-black);
	}

	input::placeholder {
		color: var(--color-secondary-light-gray);
	}

	/* input type email */
	input[type='email'] {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoBAMAAACREs5gAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgC1MsAAAAIdFJOUwBmPyUTXDBQMKt20AAAAK5JREFUKM/N0j0LwjAQBuBDQ/c3GLJa6A8Q1F2r4hwU5y66F/z/mO9eSmbpTeGB5OUuR7SQ2rM6JHyD1ytgg7IGr+eZbry2OLGMtZFBdRHdRsWT4R1J0WVcYVK1i9iYrNpAh0AxQo1RZc+ubVOapBvwsKcj8KVJXdOdjXftMhX27sf4d5iSsOEhk6ubkRportTHXkqlK9WU/qN5jn5scVD136z/fH1LiC58pZay5j9UEyCvGdpf7AAAAABJRU5ErkJggg==') !important;
		background-repeat: no-repeat !important;
		background-size: 20px 20px !important;
		background-position: 16px center !important;
	}

	input[type='email']::placeholder {
		padding-left: 26px;
	}

	input[type='email']:not(:placeholder-shown) {
		background-image: none !important;
	} 
}

/* Form overrides */
.hs-button {
  opacity: 0.7!important;
}