:root {
	--button-font-size: 18;
	--button-font-size-tablet: 16;
	--button-font-size-mobile: 16;


    --pk-button-font-family: var(--pk-text-font-family);
    --pk-button-font-weight: 600;

	/************/
	/* BUTTON 1 */
	/************/
	--button-bg-1: var(--primary-color);
	--button-border-color-1: var(--primary-color);
	--button-text-color-1: var(--pk-text-color);
	--button-icon-bg-1: var(--secondary-color);
	--button-icon-color-1: var(--primary-color);
	/* HOVER */
	--button-bg-1-hover: var(--secondary-color);
	--button-border-color-1-hover: var(--secondary-color);
	--button-text-color-1-hover: var(--button-text-color-1);
	--button-icon-bg-1-hover: var(--secondary-color);
	--button-icon-color-1-hover: var(--primary-color);

	/************/
	/* BUTTON 2 */
	/************/
	--button-bg-2: transparent;
	--button-border-color-2: var(--primary-color);
	--button-text-color-2: var(--primary-color);
	--button-icon-bg-2: var(--secondary-color);
	--button-icon-color-2: var(--primary-color);
	/* HOVER */
	--button-bg-2-hover: var(--secondary-color);
	--button-border-color-2-hover: var(--secondary-color);
	--button-text-color-2-hover: var(--pk-text-color);
	--button-icon-bg-2-hover: var(--secondary-color);
	--button-icon-color-2-hover: var(--primary-color);
}

:root {
	--pk-button-padding-block: max(0.7rem, calc(0.75 * var(--su)));
	--pk-button-padding-inline: max(1.25rem, calc(1.5 * var(--su)));
	--pk-button-border-radius: max(0.25rem, calc(0.25 * var(--su)));

	--pk-button-font-size: var(--button-font-size);
}

body.relative-scaling {
	--pk-button-font-size: max(1rem, calc(1.125 * var(--su)));
}

button {
  	font-family: var(--pk-text-font-family);
}

.pk-button-group .pk-button,
.pk-menu ul.menu li.menu-button a,
.pk-footer .footer-button,
.flex-layout .knop {
	display: inline-block;
	padding: 0.85em 1.4em;
	padding-right: calc(1.4em + var(--brand-slant));
	border: 0;
	border-radius: 0;
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--brand-slant)) 100%, 0 100%);
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.pk-button-group .pk-button:hover,
.pk-button-group .pk-button:focus,
.pk-menu ul.menu li.menu-button a:hover,
.pk-menu ul.menu li.menu-button a:focus,
.pk-footer .footer-button:hover,
.pk-footer .footer-button:focus,
.flex-layout .knop:hover,
.flex-layout .knop:focus,
.pk-button-group .pk-button:active,
.pk-menu ul.menu li.menu-button a:active,
.pk-footer .footer-button:active,
.flex-layout .knop:active{
	background-color: var(--button-bg-color-hover);
	color: var(--button-text-color-hover);
}


@media screen and (max-width: 992px) {
	:root {
		--pk-button-font-size: var(--button-font-size-tablet);
	}
}

@media screen and (max-width: 767px) {
	:root {
		--pk-button-font-size: var(--button-font-size-mobile);
	}
}