@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Thin.otf') format('opentype');
	font-weight: 100;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Extra%20Light.otf') format('opentype');
	font-weight: 200;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Medium.otf') format('opentype');
	font-weight: 500 600;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Extra%20Bold.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Black.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roc Grotesk';
	src: url('/assets/fonts/Roc%20Grotesk%20Heavy.otf') format('opentype');
	font-weight: 950;
	font-style: normal;
	font-display: swap
}

:root {
	--site-font: 'Roc Grotesk', Arial, sans-serif
}

html,
body,
body *,
button,
input,
select,
textarea {
	font-family: var(--site-font) !important
}