/**
* @version $Id: template.css
* @author B49
* @package Joomla
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant to the
* GNU General Public License, and as distributed it includes or is derivative
* of works licensed under the GNU General Public License or other free or open
* source software licenses. See COPYRIGHT.php for copyright notices and
* details.
*/

body,html {
	height:100%;}

body {
	color: #000;
	margin: 0px;
	padding: 0;
	background-color: #ffffff;
	overflow-x: auto;
}

	
a {
	color:inherit;
	text-decoration:none;
}

.bg {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
	background-image:url(/img/bg.jpg);
    z-index: 0;
	}	
	

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

	.inhaltcontainer{
		position: relative;
		top: 50px;
		width: 560px;
		height: 500px;
	}

	.firma{
		color: #fff;
		text-align: center;
		font-size: 50px;
		font-style: 700;
		line-height: 80px;
		font-family: 'Roboto', sans-serif;
	}

	.fliesstext{
		color: #fff;
		text-align: center;
		font-size: 16px;
		font-style: 400;
		line-height: 20px;
		font-family: 'Roboto', sans-serif;
	}

	.fliesstext2{
		color: #fff;
		text-align: center;
		font-size: 20px;
		font-style: 700;
		line-height: 20px;
		font-family: 'Roboto', sans-serif;
	}

	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}
	.container{
		width: 100%;
		height: 100vh;
		background: #141a34;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container form{
		width: 100%;
		max-width: 560px;
		padding: 50px 30px 20px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
		position: relative;
	}

	.input-group{
		width: 100%;
		display: flex;
		align-items: center;
		margin: 10px 0;
		position: relative;
	}
	.input-group label{
		flex-basis: 28%;
	}

	.input-group span{
		position: absolute;
		bottom: 12px;
		right: 17px;
		font-size: 14px;
		color: red;
	}

	.input-group input, .input-group textarea{
		flex-basis: 100%;
		background: #fff;
		border: 0;
		outline: 0;
		padding: 10px 0;
		padding-left: 10px;
		border-bottom: 1px solid #999;
		color: #000;
		font-size: 16px;
		font-style: 400;
		font-family: 'Roboto', sans-serif;
	}
	::placeholder{
		font-size: 14px;
	}

	form button{
		background: #fff;
		color: #000;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		padding: 10px 40px;
		outline: 0;
		cursor: pointer;
		display: block;
		margin: 30px auto 10px;
		font-size: 16px;
		font-style: 400;
		font-family: 'Roboto', sans-serif;
	}

	#submit-error{
		position: absolute;
		bottom: 34px;
		right: 17px;
		font-size: 14px;
		color: red;
		background: white;
		font-family: 'Roboto', sans-serif;
		line-height: 38px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
	}

	.input-group span i{
		color: seagreen;
	}

	.center {
		width: 580px;
		margin: auto;
	}

}

@media only screen and (max-width: 766px) {
	
	.inhaltcontainer{
		position: flex;
		top: 10px;
		width: 320px;
		height: 500px;
	}

	.firma{
		color: #fff;
		text-align: center;
		font-size: 30px;
		font-style: 700;
		line-height: 80px;
		font-family: 'Roboto', sans-serif;
	}

	.fliesstext{
		color: #fff;
		text-align: center;
		font-size: 12px;
		font-style: 400;
		line-height: 20px;
		font-family: 'Roboto', sans-serif;
	}

	.fliesstext2{
		color: #fff;
		text-align: center;
		font-size: 16px;
		font-style: 700;
		line-height: 20px;
		font-family: 'Roboto', sans-serif;
	}

	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}
	.container{
		width: 100%;
		height: 100vh;
		background: #141a34;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container form{
		width: 100%;
		max-width: 320px;
		padding: 50px 30px 20px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
		position: relative;
	}

	.input-group{
		width: 100%;
		display: flex;
		align-items: center;
		margin: 10px 0;
		position: relative;
	}
	.input-group label{
		flex-basis: 28%;
	}

	.input-group span{
		position: absolute;
		bottom: 12px;
		right: 17px;
		font-size: 14px;
		color: red;
	}

	.input-group input, .input-group textarea{
		flex-basis: 100%;
		background: #fff;
		border: 0;
		outline: 0;
		padding: 10px 0;
		padding-left: 10px;
		border-bottom: 1px solid #999;
		color: #000;
		font-size: 16px;
		font-style: 400;
		font-family: 'Roboto', sans-serif;
	}
	::placeholder{
		font-size: 14px;
	}

	form button{
		background: #fff;
		color: #000;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		padding: 10px 40px;
		outline: 0;
		cursor: pointer;
		display: block;
		margin: 30px auto 10px;
		font-size: 16px;
		font-style: 400;
		font-family: 'Roboto', sans-serif;
	}

	#submit-error{
		position: absolute;
		bottom: 34px;
		right: 17px;
		font-size: 14px;
		color: red;
		background: white;
		font-family: 'Roboto', sans-serif;
		line-height: 38px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
	}

	.input-group span i{
		color: seagreen;
	}

	.center {
	  margin: auto;
	  width: 360px;
	  padding: 10px;
	}
	
}

@media only screen and (max-height: 320px) {
	
	.inhaltcontainer{
		position: flex;
		top: 10px;
		width: 320px;
		height: 320px;
		overflow-x: scroll;
		white-space: nowrap;
		padding-bottom: 30px;
	}

	.firma{
		color: #fff;
		text-align: center;
		font-size: 30px;
		font-style: 700;
		line-height: 80px;
		font-family: 'Roboto', sans-serif;
	}

	.fliesstext{
		color: #fff;
		text-align: center;
		font-size: 12px;
		font-style: 400;
		line-height: 20px;
		font-family: 'Roboto', sans-serif;
	}

	.fliesstext2{
		color: #fff;
		text-align: center;
		font-size: 16px;
		font-style: 700;
		line-height: 20px;
		font-family: 'Roboto', sans-serif;
	}

	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}
	.container{
		width: 100%;
		height: 100vh;
		background: #141a34;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container form{
		width: 100%;
		max-width: 320px;
		padding: 50px 30px 20px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
		position: relative;
	}

	.input-group{
		width: 100%;
		display: flex;
		align-items: center;
		margin: 10px 0;
		position: relative;
	}
	.input-group label{
		flex-basis: 28%;
	}

	.input-group span{
		position: absolute;
		bottom: 12px;
		right: 17px;
		font-size: 14px;
		color: red;
	}

	.input-group input, .input-group textarea{
		flex-basis: 100%;
		background: #fff;
		border: 0;
		outline: 0;
		padding: 10px 0;
		padding-left: 10px;
		border-bottom: 1px solid #999;
		color: #000;
		font-size: 16px;
		font-style: 400;
		font-family: 'Roboto', sans-serif;
	}
	::placeholder{
		font-size: 14px;
	}

	form button{
		background: #fff;
		color: #000;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		padding: 10px 40px;
		outline: 0;
		cursor: pointer;
		display: block;
		margin: 30px auto 10px;
		font-size: 16px;
		font-style: 400;
		font-family: 'Roboto', sans-serif;
	}

	#submit-error{
		position: absolute;
		bottom: 34px;
		right: 17px;
		font-size: 14px;
		color: red;
		background: white;
		font-family: 'Roboto', sans-serif;
		line-height: 38px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
	}

	.input-group span i{
		color: seagreen;
	}

	.center {
	  margin: auto;
	  width: 360px;
	  padding: 10px;
	  position: sticky;
	}
	
}