@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
	--width-full: clamp(15px, calc(-7.5px + 4.5vw), 60px);
	--width-xl: max(clamp(15px, calc(-7.5px + 4.5vw), 60px), calc(50% - 835px));
	--width-l: max(clamp(15px, calc(-7.5px + 4.5vw), 60px), calc(50% - 710px));
	--width-m: max(clamp(15px, calc(-7.5px + 4.5vw), 60px), calc(50% - 460px));
	--width-s: max(clamp(15px, calc(-7.5px + 4.5vw), 60px), calc(50% - 210px));
	--padding-xxl: clamp(15px, calc(-77.5px + 18.5vw), 200px);
	--padding-xl: clamp(15px, calc(-52.5px + 13.5vw), 150px);
	--padding-l: clamp(15px, calc(-40px + 11vw), 125px);
	--padding-m: clamp(15px, calc(-27.5px + 8.5vw), 100px);
	--padding-s: clamp(15px, calc(-15px + 6vw), 75px);
	--padding-xs: clamp(15px, calc(-2.5px + 3.5vw), 50px);
	--padding-xxs: clamp(15px, calc(10px + 1vw), 25px);
	--gap-xxl: clamp(30px, calc(-5px + 7vw), 100px);
	--gap-xl: clamp(25px, calc(-2.5px + 5.5vw), 80px);
	--gap-l: clamp(20px, calc(0px + 4vw), 60px);
	--gap-m: clamp(15px, calc(2.5px + 2.5vw), 40px);
	--gap-s: clamp(10px, calc(5px + 1vw), 20px);
	--gap-xs: 10px;
	--gap-xxs: 5px;
	--border-radius-s: 5px;
	--border-radius-m: 10px;
	--border-radius-l: 60px;
	--error: red;
}

body, textarea, input, select {
	font-family: "Rubik", sans-serif;
	font-size: 18px;
	line-height: 1.2;
	color: var(--dark-grey);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .hero {
	line-height: 1.2;
	margin: 0 0 clamp(15px, calc(7.5px + 1.5vw), 30px);
	font-weight: 400;
	strong {
		font-weight: 800;
	}
}

.hero {
	font-size: clamp(40px, calc(35px + 1vw), 50px);
}

h1, .h1 {
	font-size: clamp(32px, calc(26px + 1.2vw), 44px);
}

h2, .h2 {
	font-size: clamp(30px, calc(27px + 0.6vw), 36px);
}

h3, .h3 {
	font-size: clamp(28px, calc(27px + 0.2vw), 30px);
}

h4, .h4 {
	font-size: 26px;
}

h5, .h5 {
	font-size: 24px;
}

h6, .h6 {
	font-size: 22px;
}

p {
	margin: 0 0 var(--gap-s);
}

p.quote_text {
	font-size: clamp(22px, calc(15px + 1.4vw), 36px);
}

p.large-text {
	font-size: 20px;
}

p.small-text {
	font-size: 16px;
}

.minus-margin {
	margin-bottom: 0;
}

.minus-margin + * {
	margin-top: 10px;
}

.light-text {
	font-weight: 300;
}

.regular-text {
	font-weight: 400;
}

.semi-bold-text {
	font-weight: 600;
}

.underline {
	text-decoration: underline;
}

a {
	color: var(--orange);
}

img {
	max-width: 100%;
	height: auto;
}

div.wp-caption {
	max-width: 100%;
	display: inline-block;
}

p.wp-caption-text {
	background-color: #f7f7f7;
	color: #808080;
	padding: 16px 25px;
	font-size: 18px;
	font-style: italic;
}

.button {
	padding: 8px 20px;
	display: inline-block;
	text-decoration: none;
	color: var(--white);
	background: red;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

.mce-content-body a.button[data-mce-selected] {
	padding: 8px 20px;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
}

button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type=search] {
	-webkit-appearance: none;
}

/* bullet points */
ul.check_ul {
	list-style: none;
	padding: 0;
}

ul.check_ul > li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}

ul.check_ul > li:last-child {
	margin-bottom: 0;
}

ul.check_ul > li::before {
	content: '';
	margin-right: 15px;
	min-width: 20px;
	min-height: 20px;
	background: center / 16px 12px no-repeat url("data:image/svg+xml,%3Csvg width='16' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5.43 12.23-5.2-5.2a.8.8 0 0 1 0-1.13l1.14-1.13a.8.8 0 0 1 1.13 0L6 8.27l7.5-7.5a.8.8 0 0 1 1.13 0l1.14 1.13a.8.8 0 0 1 0 1.13l-9.2 9.2a.8.8 0 0 1-1.14 0Z' fill='%23FF0000'/%3E%3C/svg%3E");
}

.bg_graphic_map::before {
	background: no-repeat center / contain url('../img/map.svg');
}

.border_radius_s {
	border-radius: var(--border-radius-s);
}
.border_radius_m {
	border-radius: var(--border-radius-m);
}
.border_radius_l {
	border-radius: 20px;
}
.border_radius_xl {
	border-radius: 50px;
}

@media (max-width: 450px) {
	.button {
		min-width: 100%;
		box-sizing: border-box;
	}
}
