@media (min-width: 1980px) and (orientation: Landscape){
	:root {
		--font-s1: calc(var(--max-w-percent) / 2 + 5px);
		--font-s2: calc(var(--max-w-percent) * 2 / 3 + 5px);;
		--font-s3: calc(var(--max-w-percent) + 10px);
		--border: calc(var(--max-w-percent) / 5) solid white;
		--string-width: calc(15 * var(--max-w-percent));
		--string-width-focus: calc(30 * var(--max-w-percent));
	}

	div#contact{
		background-color: black;
		min-height: calc(100vh - var(--header-s1));
	}

	form#form{
		width: 100%;
	}

	p.form-hint{
		color: white;
		width: 100%;
		text-align: center;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-transform: uppercase;
		font-family: OpenSans-Medium;
		padding-top: calc(var(--max-w-percent) * 3);
		padding-bottom: var(--font-s1);
	}

	input.form-input, textarea.form-input{
		background-color: black;
		color: white;
		border: var(--border);
		border-right: 0px;
		border-left: 0px;
		transition: width 0.4s ease-out 0s, height 0.4s ease-out 0s;
		outline: none;
		width: var(--string-width);
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		font-family: Roboto-Regular;
		text-align: center;
		padding: var(--font-s1);
	}

	input.form-input:focus, textarea.form-input:focus{border-color: rgb(183, 0, 64);}


	input.name{}
	input.name:focus{ width: var(--string-width-focus);}

	input.adress{}
	input.adress:focus{ width: var(--string-width-focus);}

	textarea.message{ resize: none; height: calc(var(--max-w-percent) * 6); text-align: left;}		
	textarea.message:focus{
		height: calc(var(--max-w-percent) * 12); 
		width: calc(var(--max-w-percent) * 50); 
	}	

	input.form-send{
		background-color: black;
		color: white;
		line-height: var(--font-s1);
		font-size: var(--font-s1);
		padding: var(--font-s1) 0px;
		font-family: Roboto-Medium;
		text-transform: uppercase;
		border-radius: var(--max-w-percent);
		border: var(--border);
		text-align: center;
		width: calc(var(--max-w-percent) * 10);
		transition: background-color 0.4s ease-out 0s;
		margin-top: var(--font-s2);
	}

	input.form-send:hover{
		color: black;
		background-color: rgb(183, 0, 64);
		border-color: black;
	}

	div.alert{
		position: absolute;
		display: none;
		background-image: url("/photo/contact/error.png");
		width: var(--font-s3);
		height: var(--font-s3);
		background-size: 100%;
		background-repeat: no-repeat;
		top: calc((100% - var(--font-s3)) / 2);
		left: calc(50% + var(--string-width) / 2 + 1vw);
	}

	div.form-container{
		position: relative;
		text-align: center;
	}
	
	h1.headline.author-form-headline{background-color: black; color: white;}

  	img.return_photo{
		width: calc(var(--max-w-percent) * 20);
		padding-top: 100px;
  	}
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){
	:root {
		--font-s1: calc(1vw / 2 + 5px);
		--font-s2: calc(2vw / 3 + 5px);;
		--font-s3: calc(1vw + 10px);
		--border: calc(1vw / 5) solid white;
		--string-width: 15vw;
		--string-width-focus: 30vw;
	}

	div#contact{
		background-color: black;
		min-height: calc(100vh - var(--header-s2));
	}

	form#form{
		width: 100%;
	}

	p.form-hint{
		color: white;
		width: 100%;
		text-align: center;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-transform: uppercase;
		font-family: OpenSans-Medium;
		padding-top: 3vw;
		padding-bottom: var(--font-s1);
	}

	input.form-input, textarea.form-input{
		background-color: black;
		color: white;
		border: var(--border);
		border-right: 0px;
		border-left: 0px;
		transition: width 0.4s ease-out 0s, height 0.4s ease-out 0s;
		outline: none;
		width: var(--string-width);
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		font-family: Roboto-Regular;
		text-align: center;
		padding: var(--font-s1);
	}

	input.form-input:focus, textarea.form-input:focus{ border-color: rgb(183, 0, 64);}

	input.name{}
	input.name:focus{ width: var(--string-width-focus);}

	input.adress{}
	input.adress:focus{ width: var(--string-width-focus);}

	textarea.message{ resize: none; height: 6vw; text-align: left;}		
	textarea.message:focus{height: 12vw; width: 50vw;}	

	input.form-send{
		background-color: black;
		color: white;
		bottom: 0px;
		line-height: var(--font-s1);
		font-size: var(--font-s1);
		padding: var(--font-s1) 0px;
		font-family: Roboto-Medium;
		text-transform: uppercase;
		border-radius: calc(1vw);
		border: var(--border);
		text-align: center;
		width: 10vw;
		transition: background-color 0.4s ease-out 0s;
		margin-top: var(--font-s2);
	}

	input.form-send:hover{
		color: black;
		background-color: rgb(183, 0, 64);
		border-color: black;
	}

	div.alert{
		position: absolute;
		display: none;
		background-image: url("/photo/contact/error.png");
		width: var(--font-s3);
		height: var(--font-s3);
		background-size: 100%;
		background-repeat: no-repeat;
		top: calc((100% - var(--font-s3)) / 2);
		left: calc(50% + var(--string-width) / 2 + 1vw);
	}

	div.form-container{
		position: relative;
		text-align: center;
	}

	h1.headline.author-form-headline{background-color: black; color: white;}

  	img.return_photo{
		width: 20vw;
		padding-top: 100px;
  	}
}

@media (max-width: 720px), (orientation: Portrait){
	:root {
		--font-s1: calc(2vw);
		--font-s2: calc(3vw);;
		--font-s3: calc(5vw);
		--border: calc(1vw / 4) solid white;
		--string-width: 40vw;
		--string-width-focus: 70vw;
		--margin-top: 10vw;
		--margin-bottom: 3vw;
	}

	div#contact{
		background-color: black;
		min-height: calc(100vh - var(--header-s3));
	}

	form#form{
		width: 100%;
	}

	p.form-hint{
		color: white;
		width: 100%;
		text-align: center;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-transform: uppercase;
		font-family: OpenSans-Medium;
		padding-top: 8vw;
		padding-bottom: var(--font-s1);
	}

	input.form-input, textarea.form-input{
		background-color: black;
		color: white;
		border: var(--border);
		border-right: 0px;
		border-left: 0px;
		outline: none;
		width: var(--string-width);
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		font-family: Roboto-Regular;
		text-align: center;
		padding: var(--font-s1);
		transition: width 0.4s ease-out 0s, height 0.4s ease-out 0s;
	}

	input.form-input:focus, textarea.form-input:focus{border-color: rgb(183, 0, 64);}

	input.name{}
	input.name:focus{ width: var(--string-width-focus);}

	input.adress{}
	input.adress:focus{ width: var(--string-width-focus); }

	textarea.message{ resize: none; height: 14vw; text-align: left;}		
	textarea.message:focus{
		height: 40vw;
		width: var(--string-width-focus);
	}	

	input.form-send{
		background-color: black;
		color: white;
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		padding: var(--font-s1) 0px;
		font-family: Roboto-Medium;
		text-transform: uppercase;
		border-radius: calc(1vw);
		border: var(--border);
		text-align: center;
		width: 20vw;
		margin-top: var(--margin-top);
	}

	input.form-send:hover{
		color: black;
		background-color: rgb(183, 0, 64);
		border-color: black;
	}

	div.alert{
		position: absolute;
		display: none;
		background-image: url("/photo/contact/error.png");
		width: var(--font-s3);
		height: var(--font-s3);
		background-size: 100%;
		background-repeat: no-repeat;
		top: calc((100% - var(--font-s3)) / 2);
		left: calc(50% + var(--string-width) / 2 + 1vw);
	}

	div.form-container{
		position: relative;
		text-align: center;
	}

	h1.headline.author-form-headline{background-color: black; color: white;}

  	img.return_photo{
		width: 20vw;
		padding-top: 5vw;
  	}
}