:root {

	/* Gutenberg color definitions */
	--primary-color: #E3051E;
	--primary-color-hue: #a20000;
	--secondary-color: #F9AE36;
	--secondary-color-hue: #ca8600;
	--third-color: #E6DFD2;
	--third-color-hue: #FFF9ED;
	--success-color: #2F8F4E;
	--warning-color: #E66A20;
	--alert-color: #C14632; 
	--light-gray: #cacaca;
	--medium-gray: #8a8a8a;
	--dark-gray: #4a4a4a;
	--black: #000000;
	--white: #ffffff;


	/* SMALL */

	--baseline: 24px;

	--space-xs: 6px;
	--space-sm: 12px;
	--space-md: 18px;
	--space-lg: 24px;

	--fontspace: 12px; 
	
	--h1-size : 30px; 
	--h1-lineheight : calc(var(--fontspace) + 30px); 
	
	--h2-size : 24px;
	--h2-lineheight : calc(var(--fontspace) + 24px); 

	--h3-size : 24px; 
	--h3-lineheight : calc(var(--fontspace) + 24px); 

	--h4-size : 18px; 
	--h4-lineheight : calc(var(--fontspace) + 18px); 

	--h5-size : 16px; 
	--h5-lineheight : calc(var(--fontspace) + 16px); 

	--h6-size : 16px; 
	--h6-lineheight : var(--h5-lineheight);

	--p-size : 16px;
	--p-lineheight : var(--baseline); 

	--blockquote-size : 18px;
	--blockquote-lineheight : 36px; 

	--p-size-article : 16px;
	--p-lineheight-article : var(--baseline); 
	--p-space-article : 12px;

	--cat-button-space : 6px;  
	--cat-button-line-height : 12px; 
	--cat-button-column-gap: 6px;

	--button-space : calc(.667em + 2px) calc(1.333em + 2px); 
	--button-space-sm : 6px 12px; 
	--button-font-size : 1rem; 
	--button-column-gap: 12px;
	--login-sub-btn-small: 12px;

	--searchformheight : 42px;

	--pnu-imagewidht: 60px;

	--page-h1 : 36px;
	--page-h1-lineheight : calc(var(--fontspace) + 36px);
	--page-h2 : 24px;
	--page-h2-lineheight : calc(var(--fontspace) + 24px);
	--page-h3 : 20px;
	--page-h3-lineheight : calc(var(--fontspace) + 20px);
	--page-h4 : 18px;
	--page-h4-lineheight : calc(var(--fontspace) + 18px);
	--page-h5 : 16px;
	--page-h5-lineheight : calc(var(--fontspace) + 16px);
	--page-h6 : 16px;
	--page-h6-lineheight : calc(var(--fontspace) + 16px);
}

/* MEDIUM */

@media screen and (min-width: 576px) {
	:root {

	--h1-size : 36px; 
	--h1-lineheight : calc(var(--fontspace) + 36px); 
	
	--h2-size : var(--h1-size);
	--h2-lineheight : var(--h1-lineheight); 

	--h3-size : 24px; 
	--h3-lineheight : calc(var(--fontspace) + 24px); 

	--h4-size : 24px; 
	--h4-lineheight : calc(var(--fontspace) + 24px); 

	--h5-size : 18px; 
	--h5-lineheight : calc(var(--fontspace) + 18px); 

	--h6-size : 18px; 
	--h6-lineheight : var(--h5-lineheight);

	--cat-button-space : 6px 9px;  
	--cat-button-line-height : 18px; 
	--cat-button-column-gap: 9px;
	--login-sub-btn-small: 14px;

	--page-h1 : 48px;
	--page-h1-lineheight : calc(var(--fontspace) + 48px);
	--page-h2 : 24px;
	--page-h2-lineheight : calc(var(--fontspace) + 24px);
	--page-h3 : 24px;
	--page-h3-lineheight : calc(var(--fontspace) + 24px);
	}
	
}

/* LARGE */

@media screen and (min-width: 992px) {
	:root {
		--baseline: 24px;

		--space-sm: 12px; /* 12 */
		--space-md: 24px; /* 24 */
		--space-lg: 30px; /* 30 */


		--fontspace: 12px;

		--h1-size : 54px;
		--h1-lineheight : calc(var(--fontspace) + 54px); 

		--h2-size : var(--h1-size);
		--h2-lineheight : var(--h1-lineheight); 

		--h3-size : 30px;
		--h3-lineheight : calc(var(--fontspace) + 30px); 

		--h4-size : 30px;
		--h4-lineheight : calc(var(--fontspace) + 30px); 

		--h5-size : 24px;
		--h5-lineheight : calc(var(--fontspace) + 24px); 

		--h6-size : 18px;
		--h6-lineheight : calc(var(--fontspace) + 18px);


		--page-h1 : 54px;
		--page-h1-lineheight : calc(var(--fontspace) + 54px);
		--page-h2 : 36px;
		--page-h2-lineheight : calc(var(--fontspace) + 36px);
		--page-h3 : 30px;
		--page-h3-lineheight : calc(var(--fontspace) + 30px);

		--blockquote-size : 20px;
		--blockquote-lineheight : 30px; 

		--p-size-article : 18px;
		--p-lineheight-article : 32px; 
		--p-space-article : 20px;

		--button-space : calc(.667em + 2px) calc(1.333em + 2px); 
		--button-space-sm : 6px 12px; 
		--button-font-size : 1rem; 
		--button-column-gap: 12px;
	
		--searchformheight : 60px;
	}
}