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

:root
{
	--device: Desktop;
	--breakpoints: 1440px;
	--columns: 12px;
	--gutters: 16px;
	--column-width: 96px;
	--color-brand-lightest-red: #ffe5e8;
	--color-neutrals-white: #ffffff;
	--color-neutrals-light-gray: #dfdfdf;
	--color-neutrals-gray: #818181;
	--color-neutrals-deep-gray: #363636;
	--color-neutrals-black: #000000;
	--color-brand-light-red: #f9a3ad;
	--color-brand-red: #df1f36;
	--color-brand-deep-red: #ae0a1d;
	--color-brand-deepest-red: #67000c;
	--color-system-light-green: #e2ffe9;
	--color-system-green: #05c031;
	--color-system-light-blue: #dfecff;
	--color-system-blue: #458fff;
	--font-body-copy: "instrument sans", "instrument sans";
	--font-headlines: "blinker", "blinker";
}

/* Resets */
* { margin: 0; box-sizing: border-box; }
button { appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
a { text-decoration: none; color: inherit; cursor: pointer; }
input, select, textarea { appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0; outline: none; }
select, label { cursor: pointer; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
img { display: block; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 100%; height: 100%; cursor: pointer; }
.swiper { overflow: clip; width: 100%; height: 100%; }
.swiper-button-prev::after, .swiper-button-next::after { display: none; }
.swiper-button-prev, .swiper-button-next { position: relative; top: auto; margin-top: 0; color: inherit; }

h1, .h1
{
	font-size: 48px;
	line-height: 48px;
	font-weight: 300;
	font-family: var(--font-headlines);

	@media (min-width: 1440px)
	{
		font-size: 60px;
		line-height: 64px;
		font-weight: 300;
		font-family: var(--font-headlines);
	}
}

h2, .h2
{
	font-size: 36px;
	line-height: 40px;
	font-weight: 300;
	font-family: var(--font-headlines);

	@media (min-width: 1440px)
	{
		font-size: 48px;
		line-height: 52px;
		font-weight: 300;
		font-family: var(--font-headlines);
	}
}

h3, .h3
{
	font-size: 32px;
	line-height: 36px;
	font-weight: 300;
	font-family: var(--font-headlines);

	@media (min-width: 1440px)
	{
		font-size: 40px;
		line-height: 34px;
		font-weight: 300;
		font-family: var(--font-headlines);
	}
}

h4, .h4
{
	font-size: 26px;
	line-height: 30px;
	font-weight: 300;
	font-family: var(--font-headlines);

	@media (min-width: 1440px)
	{
		font-size: 30px;
		line-height: 34px;
		font-weight: 300;
		font-family: var(--font-headlines);
	}
}

h5, .h5
{
	font-size: 22px;
	line-height: 26px;
	font-weight: 300;
	font-family: var(--font-headlines);

	@media (min-width: 1440px)
	{
		font-size: 26px;
		line-height: 30px;
		font-weight: 300;
		font-family: var(--font-headlines);
	}
}

h6, .h6
{
	font-size: 18px;
	line-height: 22px;
	font-weight: 300;
	font-family: var(--font-headlines);

	@media (min-width: 1440px)
	{
		font-size: 22px;
		line-height: 26px;
		font-weight: 300;
		font-family: var(--font-headlines);
	}
}

.body-copy-small, .body-copy-small > p
{
	font-size: 15px;
	line-height: 22px;
	font-weight: 400;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 16px;
		line-height: 24px;
		font-weight: 400;
		font-family: var(--font-body-copy);
	}
}

.body-copy-medium, .body-copy-medium > p
{
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 18px;
		line-height: 28px;
		font-weight: 400;
		font-family: var(--font-body-copy);
	}
}

.body-copy-large, .body-copy-large > p
{
	font-size: 22px;
	line-height: 30px;
	font-weight: 400;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 24px;
		line-height: 32px;
		font-weight: 400;
		font-family: var(--font-body-copy);
	}
}

.navigation, .navigation > p
{
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 18px;
		line-height: 20px;
		font-weight: 500;
		font-family: var(--font-body-copy);
	}
}

.captions, .captions > p
{
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 14px;
		line-height: 20px;
		font-weight: 400;
		font-family: var(--font-body-copy);
	}
}

.form-fields, .form-fields > p
{
	font-size: 15px;
	line-height: 16px;
	font-weight: 400;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 16px;
		line-height: 18px;
		font-weight: 400;
		font-family: var(--font-body-copy);
	}
}

.field-labels, .field-labels > p
{
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	font-family: var(--font-body-copy);

	@media (min-width: 1440px)
	{
		font-size: 12px;
		line-height: 14px;
		font-weight: 500;
		font-family: var(--font-body-copy);
	}
}

.container 
{
	width: 100%;
	
	@media (min-width: 1440px)
	{		
		max-width: 1200px;
	}
}