:root {


	--font-default-family: "Cera Pro", sans-serif;
	--font-default-italic: italic;
	--font-default-weight-thin: 100; /* also italic */
	--font-default-weight-light: 300; /* also italic */
	--font-default-weight-regular: 400; /* also italic */
	--font-default-weight-medium: 500; /* also italic */
	--font-default-weight-bold: 700; /* also italic */
	--font-default-weight-black: 900; /* also italic */

	--font-special-family: "Cera Stencil Pro", sans-serif;
	--font-special-italic: normal;
	--font-special-weight-thin: 100; /* no italic */
	--font-special-weight-light: 300; /* no italic */
	--font-special-weight-regular: 400; /* no italic */
	--font-special-weight-medium: 500; /* no italic */
	--font-special-weight-bold: 700; /* no italic */
	--font-special-weight-black: 900; /* no italic */


	--font-default-size: 18px;
	--font-default-line-height: 1.3;

	--color-white: #fff;
	--color-black: #000;

	--color-grey-light: #eee;
	--color-grey-dark: #222;

	--color-text: var(--color-black);

	--color-highlight: #fe01b1;
	--color-green: #b1dcda;

	--header-height: 90px;
	--header-height-scrolled: 60px;

	--footer-height: 155px;
	--subfooter-height: 46px;

	--page-header-overlay: rgba(0,0,0,.4); /* can be overwritten on a per-page-basis */

}

@media ( max-width: 1040px ) {

	:root {
		--header-height: 50px;
		--header-height-scrolled: 50px;
	}

}

.headline-xl {
	font-family: var(--font-special-family);
	font-weight: var(--font-special-weight-medium);
	font-size: 3em;
	text-transform: uppercase;
}

.headline-l {
	font-family: var(--font-special-family);
	font-weight: var(--font-special-weight-medium);
	font-size: 1.8em;
	text-transform: uppercase;
}

.headline-m {
	font-family: var(--font-special-family);
	font-weight: var(--font-special-weight-medium);
	font-size: 1.5em;
	text-transform: uppercase;
}

.headline-s {
	font-family: var(--font-special-family);
	font-weight: var(--font-special-weight-medium);
	font-size: 1.2em;
	text-transform: uppercase;
}

.as-headline {
	font-family: var(--font-special-family);
	font-weight: var(--font-special-weight-medium);
	text-transform: uppercase;
	font-style: normal !important;
}

.sub-headline {
	font-family: var(--font-default-family);
	font-weight: var(--font-default-weight-light);
	font-style: italic;
	text-transform: none;
}

@media ( max-width: 880px ) {

	.headline-xl {
		font-size: 2.6em;
	}

	.headline-l {
		font-size: 1.6em;
	}

	.headline-m {
		font-size: 1.3em;
	}

	.headline-s {
		font-size: 1.1em;
	}

}

@media ( max-width: 680px ) {

	.headline-xl {
		font-size: 2em;
	}

	.headline-l {
		font-size: 1.4em;
	}

	.headline-m {
		font-size: 1.2em;
	}

	.headline-s {
		font-size: 1.1em;
	}

}