/* global vars */

:root {
	/* color */
	--color1: #212121; /* black */
	--color2: #fff; /* whtie */
	--color3: #909090; /* darkgrey */
	--color4: #f7f7f7; /* lightgrey */
	--color5: #F14924; /* orange */
	/* headlines */
	--headline-color: var(--color1);
	--headline-h3-font-size: clamp(28px, 3vw + 0.6rem, 33px);
	--headline-h4-font-size: clamp(20px, 2vw + 0.6rem, 25px);
	/* text */
	--text-color: var(--color1);
	--text-font-size: 15px;
	--text-font-size-small: 13px;
	/* button */
	--button-text-size: var(--text-font-size);
}

/* font */

.text-size-small {
	font-size: var(--text-font-size-small) !important;
}

.text-color-grey {
	color: var(--color3);
}

/* button */

a.button {
	display: inline-block;
	background: var(--color5);
	border-radius: 50px;
	color: var(--color2);
	padding: 10px 20px;
	font-size: var(--button-text-size);
}

/* box */

.box {
	border-radius: 8px;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
	padding: 20px;
	margin: 20px 0;
}

.box.light {
	background-color: var(--color2);
}

/* icon-text-block */

.icon-text-block {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 0;
}

.icon-text-block .icon {
	width: 40px;
}

.icon-text-block p {
	line-height: 1.2em;
}


/* sl_system_qr */

.sl_system_qr .header {
	display: flex;
	justify-content: space-between;
	background: var(--color2);
	padding: 30px 20px;
}

.sl_system_qr .header a {
	border-bottom: none;
}

.sl_system_qr .header img {
	max-width: 120px;
}

.sl_system_qr .header .phone {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sl_system_qr .header .phone p {
	line-height: 1em;
}

.sl_system_qr > .content {
	padding: 30px 20px;
}

.sl_system_qr .download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: none;
}

.sl_system_qr .download p {
	color: var(--color5);
}

/* make global on roll out */

.sl_system_qr h3 {
	font-size: var(--headline-h3-font-size);
}

.sl_system_qr h4 {
	font-size: var(--headline-h4-font-size);
}

.sl_system_qr p {
	font-size: var(--text-font-size);
}

.sl_system_qr strong {
	font-size: var(--text-font-size);
}