@charset "UTF-8";

/**
 * fonts.css 1.2.0
 * Author: hybrid.
 *
 * Font faces, family and size tokens.
 * Self-hosted via Google Webfonts Helper — no external requests.
 *
 * Tokens
 * --font-family          main font family
 * --font-family-dyslexia OpenDyslexic fallback
 * --font-weight-normal   300
 * --font-weight-medium   500
 * --font-weight-bold     600
 * --font-size            base size (1rem)
 * --main-font-size       main content size (1em → 1.25em at 1200px)
 * --h1-font-size         1.5em → 3em
 * --h2-font-size         1.25em → 2em
 * --title-font-size      1.125em → 1.5em
 * --main-title-font-size 3rem → 14rem
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== FAMILY ============================== */

:root {
	--font-family: 'Poppins', sans-serif;
	--font-family-dyslexia: 'OpenDyslexic', sans-serif;
	--font-weight-normal: 300;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
}


/* ============================== SIZE ============================== */

:root {
	--font-size: 1rem;
	--line-height: 1.25;
	--main-font-size: 1em;
}

@media (max-width: 380px) {
	:root {
		--font-size: .875rem;
	}
}

:root {
	--h1-font-size: 2em; /*1.5em;*/
	--h2-font-size: 1.5em; /*1.25em;*/

	--title-font-size: 1.125em;

	--main-title-font-size: calc(var(--font-size) * 3);
	--description-title-size: calc(var(--font-size) * 1.5);
}

@media (min-width: 760px) {
	:root {
		--h1-font-size: calc(var(--font-size) * 4);/*2em;*/
		--h2-font-size: calc(var(--font-size) * 3); /*1.5em;*/
		
		--title-font-size: 1.25em;

		--main-title-font-size: calc(var(--font-size) * 6);
	}
}
@media (min-width: 1000px) {
	:root {
		--main-title-font-size: calc(var(--font-size) * 8);
	}
}
@media (min-width: 1200px) {
	:root {
		--main-font-size: 1.25em;
		--overlay-font-size: 1.25em;

		/*--h1-font-size: calc(var(--font-size) * 6);*/ /*3em;*/
		--h2-font-size: 2em;
		--title-font-size: 1.5em;

		--main-title-font-size: calc(var(--font-size) * 10);
	}
}
@media (min-width: 1400px) {
	:root {
		--h1-font-size: calc(var(--font-size) * 6); /*3em;*/
	}
}
@media (min-width: 1600px) {
	:root {
		--main-title-font-size: calc(var(--font-size) * 14);
	}
}


/* ============================== FONT FACE ============================== */

/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */

/* poppins-300 - latin */
@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2');
}

/* poppins-300italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 300;
	src: url('../fonts/poppins-v24-latin-300italic.woff2') format('woff2');
}

/* poppins-500 - latin */
@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2');
}

/* poppins-500italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 500;
	src: url('../fonts/poppins-v24-latin-500italic.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
}

/* poppins-600italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 600;
	src: url('../fonts/poppins-v24-latin-600italic.woff2') format('woff2');
}

/* OpenDyslexic - Regular */
@font-face {
	font-display: swap;
	font-family: 'OpenDyslexic';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
}

/* OpenDyslexic - Italic */
@font-face {
	font-display: swap;
	font-family: 'OpenDyslexic';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/OpenDyslexic-Italic.woff2') format('woff2');
}

/* OpenDyslexic - Bold */
@font-face {
	font-display: swap;
	font-family: 'OpenDyslexic';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
}

/* OpenDyslexic - Bold Italic */
@font-face {
	font-display: swap;
	font-family: 'OpenDyslexic';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/OpenDyslexic-BoldItalic.woff2') format('woff2');
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/* ============================== FONT FAMILY ============================== */

body {
	font-family: var(--font-family);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
}
body.dyslexia {
	font-family: var(--font-family-dyslexia);
}

h1,
.h1,
.page-title,
.main-title {
	font-weight: var(--font-weight-normal);
	/*line-height: 1;*/
}
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6,
.title,
.grid .title,
nav.primary  {
	font-weight: var(--font-weight-medium);
}
/*
.grid .title,
.title,
nav.primary {
	font-weight: var(--font-weight-medium);
}
*/
b, strong,
nav,
blockquote cite,
strong,
.buttons,
.button,
button {
	font-weight: var(--font-weight-bold);
}



/* ============================== FONT SIZE ============================== */

/* TODO !!! */

body { font-size: var(--font-size); }
main { font-size: var(--main-font-size); }
#overlays { font-size: var(--overlay-font-size); }


h1, .h1,
.page-title {
	font-size: var(--h1-font-size);
}
h2, .h2 {
	font-size: var(--h2-font-size);
}
h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
	font-size: var(--title-font-size);
}
.important {
	font-size: var(--title-font-size);
}
small,
.small {
	font-size: .75em;
}