@import url(primitive.css);

/*
Different Screen sizes:
0-478px			Smaller smartphones
479-991px		Tablets, larger smartphones
991-1279px      Laptops, larger tablets in landscape, and small desktops
1280px+         Larger Desktops and monitors
*/

/* basic-html */
html {
	width: 100%;
	height: auto;
	scroll-behavior: smooth;
}
body {
	width: 100%;
	height: auto;
	font-family: var(--ff-primary);
	font-size: 16px;
	font-weight: 400;
	color: var(--font-color);
	display: flex;
	flex-direction: column;
	background-color: var(--cl-neutral-white);
}
::selection {
	color: var(--cl-neutral-white);
	background-color: var(--cl-primary-400);
}
header {
	width: 100%;
	height: auto;
	/*background: linear-gradient(#F2FBB8, #FC6602);*/
}
main {
	width: 100%;
	height: auto;
	padding-top: 128px;
	padding-bottom: 128px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}
footer {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 991px) {
	main {
		padding-top: 64px;
		padding-bottom: 96px;
		gap: 32px;
	}
}

/* Sections */
.section_style--main {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
}

/* Paddings */
.padding_regular--64px {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	padding: 64px;
}
.padding_right-left--64px {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	padding: 0px 64px 0px 64px;
}
@media screen and (max-width: 991px) {
	.padding_regular--64px {
		padding: 32px;
	}
	.padding_right-left--64px {
		padding: 0px 32px 0px 32px;
	}
}
@media screen and (max-width: 478px) {
	.padding_regular--64px {
		padding: 24px;
	}
	.padding_right-left--64px {
		padding: 0px 24px 0px 24px;
	}
}

/* Containers */
.container_big--1440px {
	width: 100%;
	height: auto;
	max-width: 1440px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 80px;
}

/* Content-Wrapper */
.content_wrapper {
	width: auto;
	height: auto;
	margin: 0;
}
.display_flex-vert--left-top {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: start;
}
.display_flex-vert--left-space-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: start;
}
.display_flex-ho--left-center {
	display: flex;
	flex-direction: row;
	justify-content: left;
}


/* Buttons */
button {
	background-color: var(--cl-transparent);
	border: none;
	font-family: var(--ff-primary);
	font-size: 16px;
}
.button_primary {
	width: auto;
	height: auto;
	display: inline-block;
	padding: 0px 20px;
	border: 2px solid var(--cl-neutral-black);
	font-family: var(--ff-primary);
	font-size: 20px;
	line-height: 44px;
	color: var(--cl-neutral-black);
	background-color: var(--cl-secondary-400);
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}
.button_primary:hover {
	text-decoration: underline;
}

/* main_text-style */
h1 {
	font-size: 48px;
	line-height: 120%;
	font-weight: 400;
	color: var(--font-color);
	margin: var(--gap-md) var(--gap-none) var(--gap-sm) var(--gap-none);
}
h2 {
	font-size: 40px;
	line-height: 120%;
	font-weight: 400;
	color: var(--font-color);
	margin: var(--gap-md) var(--gap-none) var(--gap-sm) var(--gap-none);
}
h3 {
	font-size: 32px;
	line-height: 120%;
	font-weight: 400;
	color: var(--font-color);
	margin: var(--gap-md) var(--gap-none) var(--gap-sm) var(--gap-none);
}
h4 {
	font-size: 24px;
	line-height: 140%;
	font-weight: 400;
	color: var(--font-color);
	margin: var(--gap-sm) var(--gap-none) var(--gap-sm) var(--gap-none);
}
h5 {
	font-size: 16px;
	line-height: 140%;
	font-weight: 400;
	color: var(--font-color);
	margin: var(--gap-sm) var(--gap-none) var(--gap-sm) var(--gap-none);
}
h6 {
	font-size: 12px;
	line-height: 140%;
	font-weight: 400;
	color: var(--font-color);
	margin: var(--gap-sm) var(--gap-none) var(--gap-sm) var(--gap-none);
}
p {
	font-size: 16px;
	line-height: 140%;
	font-weight: 400;
	color: var(--font-color);
	margin-bottom: var(--gap-sm);
}
a {
	color: var(--cl-tertiary-400);
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	color: var(--font-color);
}

/* custom_text-style */
/* headline */
.headline_xl--48px {
	font-size: 48px;
	margin: var(--gap-none);
}
.headline_lg--40px {
	font-size: 40px;
	margin: var(--gap-none);
}
.headline_md--32px {
	font-size: 32px;
	margin: var(--gap-none);
}
.headline_sm--24px {
	font-size: 24px;
	margin: var(--gap-none);
}
.headline_xs--16px {
	font-size: 16px;
	margin: var(--gap-none);
}

/* subheadline */
.subheadline_xl--32px {
	font-size: 32px;
	line-height: 110%;
	margin: var(--gap-none);
}
.subheadline_lg--24px {
	font-size: 24px;
	line-height: 110%;
	margin: var(--gap-none);
}
.subheadline_md--16px {
	font-size: 16px;
	line-height: 110%;
	margin: var(--gap-none);
}
.subheadline_sm--12px {
	font-size: 12px;
	line-height: 110%;
	margin: var(--gap-none);
}
.subheadline_xs--10px {
	font-size: 10px;
	line-height: 110%;
	margin: var(--gap-none);
}

/* copytext */
.copytext_lg--24px {
	font-size: 24px;
	margin: var(--gap-none);
}
.copytext_md--16px {
	font-size: 16px;
	margin: var(--gap-none);
}
.copytext_sm--12px {
	font-size: 12px;
	margin: var(--gap-none);
}

/* font-family */
.font_family--primary {
	font-family: var(--ff-primary);
}
.font_family--secondary {
	font-family: var(--ff-secondary);
}

/* font-weight */
.font_weight--400 {
	font-weight: 400;
}
.font_weight--700 {
	font-weight: 700;
}

/* font-color */
.font_color--white {
	color: var(--cl-neutral-white);
}
.font_color--black {
	color: var(--cl-neutral-black);
}
.font_color--secondary-400 {
	color: var(--cl-secondary-400);
}

/* text-align */
.text_align--left {
	text-align: left;
}
.text_align--center {
	text-align: center;
}
.text_align--right {
	text-align: right;
}