/* Variables
---------------------------------------- */
:root {

	/*
	----------------------------------------
	Colors
	----------------------------------------
	*/

	--color-white: #fff;
	--color-white-rgb: 255, 255, 255;
	--color-black: #000;
	--color-black-rgb: 0, 0, 0;

	/*
	----------------------------------------
	Font weights
	----------------------------------------
	*/

	--font-thin: 100;
	--font-extra-light: 200;
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-semi-bold: 600;
	--font-bold: 700;
	--font-extra-bold: 800;
	--font-ultra-bold: 900;

	/*
	----------------------------------------
	Theme
	----------------------------------------
	*/

	--color-primary: #009de0;
	--color-secondary: #000;
	--color-tertiary: #000;

	--color-footer: #000;
	--color-header: #000;
	--color-mainnavi: #000;

	/*
	----------------------------------------
	Base
	----------------------------------------
	*/

	--color-base: var(--color-black);
	--fw-body: var(--font-normal);

	/*
	----------------------------------------
	Page
	----------------------------------------
	*/

	--page-width: 84.375rem;

	/*
	----------------------------------------
	Breakpoints
	----------------------------------------
	*/

	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;

	/*
	----------------------------------------
	Footer
	----------------------------------------
	*/

	--bg-footer: #2c3237;

}

/* Fonts
---------------------------------------- */

/* sarabun-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/sarabun-v15-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/sarabun-v15-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sarabun-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/sarabun-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/sarabun-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sarabun-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/sarabun-v15-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/sarabun-v15-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sarabun-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/sarabun-v15-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/sarabun-v15-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sarabun-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/sarabun-v15-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/sarabun-v15-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* allerta-stencil-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Allerta Stencil';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/allerta-stencil-v22-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		 url('assets/fonts/allerta-stencil-v22-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* Html5
---------------------------------------- */

	/* Reset elements */
	article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
	/* Create block elements */
	article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block}
	audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
	audio:not([controls]){display:none}
	[hidden]{display:none}


/* Box sizing
---------------------------------------- */
*, *:after, *:before {
	@include box-sizing(border-box);
}

/* Basic
---------------------------------------- */
html {

	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-hyphenate-character: '-'; /* Chrome bug hyphens < 98 */
	scroll-behavior: smooth;

}

a {
	color: #009de0;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

body {
	size: 100%;
	font-family: 'Sarabun';
}

p {
	padding-bottom: 1.25rem
}
p:last-child {
	padding-bottom: 0;
}

/* List
---------------------------------------- */

/* List elements */
.main ul,
.main ol {
	font-size: inherit;
	margin: 0 0 0 1.5625rem
}
.main ul li,
.main ol ul li {
	list-style: disc;
}
.main ol li,
.main ol ul ol li {
	list-style-type: decimal;
}

/* Form
---------------------------------------- */
form label {cursor:pointer}
fieldset {border:none}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;font-family:inherit}
button,input{line-height:normal;*overflow:visible}
textarea {line-height:1.25}
button {cursor:pointer;width:auto;overflow:visible}
input[type=button],input[type=submit]{cursor:pointer}
legend{border:0;*margin-left:-7px;padding:0}
table button,table input{*overflow:auto}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
//input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
//input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
//[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance:none;appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top;resize:vertical}

/* Placeholder */
::-webkit-input-placeholder {
	color: var(--color-black);
	opacity: 1;
	font-weight: var(--fw-body)
}
::-moz-placeholder {
	color: var(--color-black);
	opacity: 1;
	font-weight: var(--fw-body)
}
:-ms-input-placeholder {
	color: var(--color-black);
	opacity: 1;
	font-weight: var(--fw-body)
}

.form input {
	outline: 0;
	box-shadow: none;
	padding: 10px 15px;
	line-height: 1;
	border: none;
	background: var(--color-white);
	color: var(--color-base);
	border-radius: 0;
	appearance: none;
	width: 100%;

	@media only screen and (min-width: 768px) {
		/*width: 75%;*/
	}

	@media only screen and (min-width: 992px) {
		/*width: 50%;*/
	}

}

.form button {
	display: inline-block;
	cursor: pointer;
	padding: 14px 25px;
	background-color: var(--color-primary);
	color:var(--color-white);
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	user-select: none;
	transition: all 0.2s ease-in-out;
}

.form button:hover {
	background-color: #008bc7;
}

.form input[type="checkbox"] {
	visibility: hidden;
	display: block;
	float: left;
	margin-right: -2em;
	opacity: 0;
	width: 1em;
	z-index: -1;
}

.form input[type="checkbox"] + label {
	cursor: pointer;
	display: inline-block;
	font-weight: 300;
	padding-left: 30px;
	padding-right: 10px;
	position: relative;
}

.form input[type="checkbox"]+label:before {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #e6e7e8;
	background: #fff;
	content: "";
	display: inline-block;
	height: 20px;
	line-height: 20px;
	text-align: center;
	width: 20px;
}

.form input[type="checkbox"]:checked+label:before {
	text-decoration: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: "FontAwesome";
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
	background: #fff;
	color: #009de0;
	font-size: 12px;
	content: '\f00c';
}

/* Outer-wrap
---------------------------------------- */
#outer-wrap {}

/* Page wrap
---------------------------------------- */
#page-wrap {

	/* Sticky footer */
	@media only screen and (min-width: 768px) {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

}

/*
----------------------------------------
Header
----------------------------------------
*/

.header {

}

.header .header__inner {

	max-inline-size: var(--page-width);
	margin-inline: auto;

	padding: 1.25rem;

	@media only screen and (min-width: 768px) {
		padding: 1.25rem 3rem;
	}

}

/*
----------------------------------------
Main
----------------------------------------
*/

.main {

	padding: 50px 0;

	/* Sticky footer */
	@media only screen and (min-width: 768px) {
		flex: 1 1 auto;
	}

	padding-left: calc((100vw - 100%) / 2);
	padding-right: calc((100vw - 100%) / 2);
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	background-color: #dedfdf

}

.main section {

	+ section {
		margin-top: 50px;
	}

}

.main .main__section {}

.main__section p {
	font-size: 18px
}

.main__section--intro p {
	font-size: 22px
}

.main__section.main__section--form {}

.main__section h2,
.main__section h3 {
	font-size: clamp(1.875rem, 1.514rem + 1.54vw, 2.813rem);
	font-family: 'Allerta Stencil';
	text-transform: uppercase;
	letter-spacing: 1.35px;
	line-height: 1.2;
	margin-bottom: 0.66em;

	@media only screen and (min-width: 768px) {
		width: 50%;
	}

}

.main__section h3 {
	font-size: clamp(1.125rem, 0.74rem + 1.64vw, 2.125rem)
}

.main .main__inner {

	max-inline-size: var(--page-width);
	margin-inline: auto;

	padding: 0 1.25rem;

	@media only screen and (min-width: 768px) {
		padding: 0 3rem;
	}

}

/*
----------------------------------------
Upload
----------------------------------------
*/

.dropzone {
	min-height: none;
	border: none;
	background: transparent;
	padding: 0;
}

.dropzone .dz-message {
	background-color: var(--color-white);
	padding: 30px;
	margin: 20px 0 0;
	width: 100%;

	@media only screen and (min-width: 992px) {
		width: 100%;
	}

}

.dropzone .dz-preview.dz-image-preview {
	background: none;
	margin: 20px 20px 0 0;
}

.form .form__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;

	@media only screen and (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 768px) {

	.form__item.form__item--full {
		grid-column: span 2;
	}

}

.form__messages,
.form__success,
.form__error {
	display: none;
	padding: 20px;
	margin-bottom: 20px !important;
	background-color: #dff2bf;
	color: var(--color-base);
}

.form__success--show,
.form__error--show {
	display: block;
}

.form__error {
	background-color: #ffebe8;
}


/*
----------------------------------------
Footer
----------------------------------------
*/

.footer {

	position: relative;
	z-index: 110;
	padding: 30px 0;
	background-color: var(--bg-footer);
	color: var(--color-white);
	font-size: 17px;

	/* Sticky footer */
	@media only screen and (min-width: 992px) {
		margin-top: auto;
	}

	@media only screen and (min-width: 992px) {
		padding: 40px 0;
	}

}

.footer .footer__inner {

	max-inline-size: var(--page-width);
	margin-inline: auto;
	padding: 0 1.25rem;

	@media only screen and (min-width: 768px) {
		padding: 0 3rem;
	}

}

.footer a {
	color: var(--color-white);
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}
.footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.footer ul li {
	background: none;
	margin: 0;
	padding: 0;
}
.footer ul li:before {
	content: none;
	width: auto;
	margin: 0;
	color: inherit;
	display: block;
}

.footer .footer__inner-top {
	padding: 0 0 40px;
}

.footer .footer__inner-grid {

	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		'localbusiness'
		'madeingermany'
		'footernavi'
		'social';
	gap: 30px;

	@media only screen and (min-width: 576px) {
		grid-template-columns: 0.5fr 0.5fr;
		grid-template-areas:
			'localbusiness madeingermany'
			'footernavi social';
	}

	@media only screen and (min-width: 768px) {
		grid-template-columns: 0.33fr 0.33fr 0.33fr;
		grid-template-areas:
			'localbusiness localbusiness madeingermany'
			'. footernavi social';
	}

	@media only screen and (min-width: 1200px) {
		grid-template-columns: 0.4fr 0.15fr 0.15fr 0.15fr 0.15fr;
		grid-template-areas:
			'localbusiness madeingermany . footernavi social';
	}

}

.footer	.localbusiness {
	grid-area: localbusiness;
}

.footer	.localaddress {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 30px;

	@media only screen and (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
	}

}

.footer	.madeingermany {

	grid-area: madeingermany;

	@media only screen and (min-width: 1200px) {
		text-align: right;
	}

}

.footer	.footernavi {
	grid-area: footernavi;
}

.footer	.social {
	grid-area: social;
}
.footer	.social h5 {
	margin-bottom: 15px;
}
.footer	.social ul {
	display: flex;
	align-items: center;
	gap: 20px;
}
.footer	.social a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #009de0;
	font-size: 20px;
	transition: all 0.2s ease-in
}
.footer	.social span {
	display: none;
}