body {
	overflow-x: hidden;
}

#contact {
	width: 40vw;
	min-height: calc(45vh - var(--nav-bar_height));

	border-radius: var(--border-radius);
	border: 2px solid var(--primColor);

	position: absolute;
	left: 50%;
	top: calc(5vh + var(--nav-bar_height));
	transform: translate(-50%, 0);
}

#contact > div {
	display: block;
	width: 100%;
	height: 100%;

	margin: calc((1vh + 1vw) / 2);

	text-align: center;
  font-size: calc((var(--product_height) - var(--product_height) / 3) / 2.75);

}

#contact > div > .header {
	display: block;
	padding-bottom: 2vh;
  font-size: calc((var(--product_height) - var(--product_height) / 3) / 1.5);
}


#bericht-body {
	width: 40%;
	min-height: calc(45vh - var(--nav-bar_height));

	border: 2px solid var(--primColor);
	border-radius: var(--border-radius);

	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, 0);
}


#bericht-body-form {
	text-align: center;
}

#bericht-body-form > .inputHolder {
	display: inline-block;
	overflow: hidden;
	width: 80%;
	height: var(--inlog-body_inputHeight);
	margin: 1vh;
	border-radius: calc(var(--inlog-body_inputHeight) / 7.5);
	background-color: var(--fieldColor);

	position: relative;
}

#bericht-body-form > .inputHolder > input, #bericht-body-form > .inputHolder > textarea {
	display: inline-block;

	width: calc(100% - (var(--inlog-body_inputHeight)));
	height: var(--inlog-body_inputHeight);
	padding: 0;

	font-size: calc(var(--inlog-body_inputHeight) * 0.5);
	line-height: var(--inlog-body_inputHeight);
	color: #454545;

	border: 0;

	background-color: inherit;

	position: absolute;
	left: var(--inlog-body_inputHeight);
}

#bericht-body-form > .inputHolder.msg {
	resize: vertical;
}

#bericht-body-form > .inputHolder.msg > textarea {
	height: inherit;
	padding-top: calc(var(--inlog-body_inputHeight) * 0.25);
	line-height: calc(var(--inlog-body_inputHeight) * 0.5);
}


#bericht-body-form > input:hover {
	cursor: pointer;
}

#bericht-body-form > input:active {
	box-shadow: inset 0 0 calc((0.6vh + 0.6vw) / 2) 0 #333;
}

#bericht-body-form > input:first-of-type {
	left: 5%;
}

.send.header {
  display: inline-block;
  width: 30%;
  height: 7%;

  font-size: calc(40vw * 0.065 / 2);
  line-height: calc((90vh - var(--nav-bar_height)) * 0.07);
  color: white;

  cursor: pointer;

	border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 0.75vh var(--secColor);
  background: var(--primColor);

	margin-top: 5vh;
}

.send.header:active {
  box-shadow: 0 0vh var(--secColor);
  bottom: -0.75vh;
	transform: translate(0, 0.75vh);
}
