/* Note that you cannot encluse this with @media (min-width: 0px) in order to utlize css-vars-ponyfill. */
/* @media (min-width: 0px) { */
	:root {
		--font-size-xsmall: calc(100vmax * 0.00625 + 4px);         /* 16px @1920 and 8px @640 */
		--font-size-small: calc(100vmax * 0.009375 + 2px);        /* 20px @1920 and 8px @640 */
		--font-size-smedium: calc(100vmax * 0.010546875 + 2.25px);        /* 20px @1920 and 8px @640 */
		--font-size-medium: calc(100vmax * 0.01171875 + 2.5px);        /* 25px @1920 and 10px @640 */
		--font-size-large: calc(100vmax * 0.0140625 + 3px);        /* 30px @1920 and 12px @640 */
		--font-size-xlarge: calc(100vmax * 0.01640625 + 3.5px);        /* 35px @1920 and 14px @640 */
		--font-size-xxlarge: calc(100vmax * 0.01875 + 4px);        /* 40px @1920 and 16px @640 */
		--font-size-double-large: calc(100vmax * 0.028125 + 6px);        /* 60px @1920 and 12px @640 */
		--font-size-double-xlarge: calc(100vmax * 0.0375 + 8px);        /* 70px @1920 and 24px @640 */
		--font-size-for-diagram: calc(100vmax * 0.01171875 + 2.5px); /* 25px @1920 and 10px @640 */
		
		--text-shadow-size-medium: calc(var(--font-size-medium) / 10);
		--text-shadow-size-xxlarge: calc((100vmax * 0.01875 + 4px) / 16);
		--text-shadow-size-double-xlarge: calc((100vmax * 0.0375 + 8px) / 24);

		--icon-size-medium: calc(100vmax * 0.01171875 + 2.5px);
		--icon-size-large: calc(100vmax * 0.0140625 + 3px);

		--horizontal-margin-eighth: calc(100vw * 0.000520833 + 1.5px);      /* 5px @1920 and 3.5px @480 */
		--horizontal-margin-quarter: calc(100vw * 0.001041667 + 3px);      /* 5px @1920 and 3.5px @480 */
		--horizontal-margin-half: calc(100vw * 0.0020833333 + 6px);      /* 10px @1920 and 7px @320 */
		--horizontal-margin-single: calc(100vw * 0.0041666667 + 12px);   /* 20px @1920 and 14px @480 */
		--horizontal-margin-double: calc(100vw * 0.0041666667 * 2 + 24px);   /* 40px @1920 and 28px @480 */
		--horizontal-margin-triple: calc(100vw * 0.0041666667 * 3 + 36px);   /* 60px @1920 and 52px @480 */
		--horizontal-margin-quadruple: calc(100vw * 0.0041666667 * 4 + 48px);   /* 80px @1920 and 56px @480 */
		/* --vertical-margin-eighth: calc(100vh * 0.001973684 + 0.368421053px); */
		/* --vertical-margin-quarter: calc(100vh * 0.0046875); */
		/* --vertical-margin-half: calc(100vh * 0.009375); */
		/* --vertical-margin-single: calc(100vh * 0.01875); */
		/* --vertical-margin-double: calc(100vh * 0.0375); */
		/* --vertical-margin-triple: calc(100vh * 0.05625); */
		/* --vertical-margin-quadruple: calc(100vh * 0.075); */
		/* --vertical-margin-quintuple: calc(100vh * 0.09375); */
		--vertical-margin-eighth: calc(1rem * 0.1);
		--vertical-margin-quarter: calc(1rem * 0.2);
		--vertical-margin-half: calc(1rem * 0.4);
		--vertical-margin-single: calc(1rem * 0.8);
		--vertical-margin-double: calc(1rem * 1.6);
		--vertical-margin-triple: calc(1rem * 2.4);
		--vertical-margin-quadruple: calc(1rem * 3.2);
		--vertical-margin-quintuple: calc(1rem * 4);
		/* --header-height: calc(100vh * 0.07568); */
		/* --footer-height: calc(100vh * 0.03); */
		--border-xthin: calc(100vmax * 0.001098901 + 0.78021978px);
		--border-radius-tight: calc(100vmax * 0.003846154 + 1.230769231px);
		--border-radius-round: calc(100vmax * 0.007692308 + 2.461538462px);

		--ul-padding-top: calc(var(--vertical-margin-quarter) * 3);
		--ul-padding-bottom: calc(var(--vertical-margin-quarter) * 3);

		--header-height: calc(var(--vertical-margin-single) * 8);
		--header-height-shrunken: calc(var(--vertical-margin-single) * 3);
		--header-with-breadcrumb-height: calc(var(--vertical-margin-single) * 10);
		--header-with-breadcrumb-height-shrunken: calc(var(--vertical-margin-single) * 5);
		--header-breadcrumb-height: calc(var(--vertical-margin-single) * 2);
		--header-icon-height: calc(var(--vertical-margin-single) * 3);
		--header-logo-width: calc((100vmax * 0.01640625 + 3.5px) * 7);
		--header-logo-max-width: calc(var(--vertical-margin-single) * 4.9 / 370 * 970);
		
		--wrapper-width: calc(100vw * 0.53125 + 280px);
		--wrapper-width-for-nonwide: calc(100vw * 0.375 + 400px);

		/* --border-xthin: calc(100vmax * 0.001098901 + 0.78021978px); */
		/* --border-radius-tight: calc(100vmax * 0.003846154 + 1.230769231px); */

		--cta-color-1: rgba(25, 144, 0, 1); /* #199000 */
		--cta-color-1-light: rgba(67, 180, 67, 1); /* #43B443 */
		--image-grid-width: calc((100vw * 0.53125 + 280px) / 3.3);

		--fbslider-width: calc((100vw * 0.53125 + 280px) * 0.7);
		--fbslider-height: calc((100vw * 0.53125 + 280px) * 0.7 * 2 / 3); 

		--annotes-image-slider-width: calc((100vw * 0.53125 + 280px) * 1);
		--annotes-image-slider-height: calc((100vw * 0.53125 + 280px) * 1); 
		--annotes-image-crousel-width: calc(100vw * 0.05 + 20px);

		--flow-diagram-step-width: calc(var(--wrapper-width) / 6);
		--flow-diagram-step-height: calc(var(--wrapper-width) / 6);
	}
/* } */

/* For mobile (portrait and landscape) */
@media (orientation: portrait), (max-width: 960px) {
	:root {
		--font-size-xsmall: calc(100vmax * 0.00390625 + 8.5px);         /* 16px @1920 and 11px @640 */
		--font-size-small: calc(100vmax * 0.00625 + 8px);          /* 20px @1920 and 12px @640 */
		--font-size-medium: calc(100vmax * 0.0078125 + 10px);      /* 25px @1920 and 15px @640 */
		--font-size-for-diagram: calc(100vmax * 0.0078125 + 10px); /* 25px @1920 and 15px @640 */
		--font-size-large: calc(100vmax * 0.009375 + 12px);        /* 30px @1920 and 18px @640 */
		--font-size-xlarge: calc(100vmax * 0.0109375 + 14px);		/* 35px @1920 and 21px @640 */
		--font-size-xxlarge: calc(100vmax * 0.0125 + 16px);			/* 40px @1920 and 24px @640 */
		--font-size-double-xlarge: calc(100vmax * 0.021875 + 28px);	/* 70px @1920 and 42px @640 */

		--icon-size-medium: calc(100vmax * 0.0078125 + 10px);
		--icon-size-large: calc(100vmax * 0.009375 + 12px);

		--header-height: calc(var(--vertical-margin-single) * 5);
		--header-with-breadcrumb-height: calc(var(--vertical-margin-single) * 7);

		--flow-diagram-step-width: calc(var(--wrapper-width) / 2);
		--flow-diagram-step-height: calc(var(--wrapper-width) / 5);
	}
}