@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/*! reset */

input, textarea, button, select, ul, ol, li, h1, h2, h3, a, p, hr {
	background-color: transparent;
	border: 0;
	color: inherit;
	list-style: none;
	margin: 0;
	outline: none;
	padding: 0;
	text-decoration: none;
}

:root {
	--font-size: calc(1.25rem + 0.25vw);
	--font-size-label: calc( var(--font-size) * 0.7 );
	--font-family: 'Lexend', sans-serif;
	--font-color: black;
	--width-max: 700px;
}

strong {
	font-weight: 600;
}

/*! general */

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	color: var(--font-color);
	font-family: var(--font-family), sans-serif;
	font-size: var(--font-size);
	font-weight: 300;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

main {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 50px 20px;
	max-width: var(--width-max);
	gap: 50px;
	margin: 0 auto;
	align-items: center;
	text-align: center;
}

.logo {
	width: 20%;
	min-width: 250px;
	align-items: center;
}

a {
	border-bottom: 2px solid black;
}

h1 {
	font-size: calc( var(--font-size) * 1.5 );
}

h2 {
	font-size: calc( var(--font-size) * 1.15 );
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* --- form --- */

.small-gap {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.form-response {
	background-color: #f5f5f5;
	border: 1px solid #d2d2d2;
	padding: 25px;
	display: none;
}

form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	align-items: center;
	max-width: calc(var(--width-max) - 150px);	
}

.form-inner {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	text-align: left;
}

label {
	font-size: var(--font-size-label);
	text-align: left;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	padding: 15px;
}

input, textarea {
	border-bottom: 1px solid #d2d2d2;
	font-family: var(--font-family);
	font-size: var(--font-size);
	margin-bottom: 5px;
}

input {
	padding: 10px 0;
}

textarea {	
	resize: horizontal;
	min-height: 200px;
}

button {
	font-size: var(--font-size-label);
	color: white;
	background-color: #2b3f5e;
	width: fit-content;
	padding: 7.5px 20px;
	cursor: pointer;
}

.form-checkbox {
	align-content: center;
	display: grid;
	justify-items: left;
	grid-template-columns: 30px auto;
}

.form-checkbox input {
	margin-bottom: 0;
}

.frc-captcha {
	width: 100% !important;
}

@media only screen and (max-width : 500px) {

}