/* import fontawesome &  material icons*/

@import '../fontawesome/css/fontawesome.min.css';
@import '../fontawesome/css/regular.min.css';
@import '../fontawesome/css/solid.min.css';
@import '../material_icons/css.css';

*{
box-sizing: border-box;    
}


body{
	background-color: green;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right:12px;
  padding-left:12px;
  font-size: 14.5px;   
  font-family: Tahoma, Verdana, Arial;   
}



.kontaktformular  {
	width: 500px;
	max-width: 100%;
	border: 1px solid #666666;
	background: white;
	padding-top: 8px;
	padding-left: 15px;
	padding-bottom: 22px;
	padding-right: 15px;	
  margin:auto;       
}



.kontaktformular fieldset {
	margin-top: 18px;
	padding: 8px;
	border-width: 1px;
border-color: #666;
}



/* style submit-button  */

.kontaktformular .senden {
        font-family: Arial, sans-serif;
        letter-spacing: 0.3px;
        display: flex;
        justify-content: center; 
        align-items: center;
				width: 100%;
				font-size: 18.5px;
        height: 2.90rem;
				margin-top: calc(1rem/16*5);
				color: white;
				background-color: #286090;
				transition: background 0.3s ease;
				border: none;
				border-radius: 5px;
}


body.safari .kontaktformular .senden {
        padding-top: 3px;
}


.kontaktformular .senden:hover {
				background-color: #337ab7;
				cursor: pointer;
}


	.kontaktformular a {color: #990000; text-decoration: none;}
	.kontaktformular a:hover {color: #483D8A;}
	  
	.kontaktformular legend {
		background: #006794;
		color: #fff;
		padding: 3px 5px;
		border: 1px solid #ddd;
		text-transform: uppercase;
	}
		.kontaktformular .row{
			padding: 1px 10px;
		}
			.kontaktformular label{
				display: inline-block;
				width: 30%;
				vertical-align: top;
				padding-top: 10px;
				font-size:14.5px;
				
			}
			.kontaktformular .field{
				display: inline-block;
				width: 68%;
				
			}
					  
			.kontaktformular input, .kontaktformular textarea, .kontaktformular select {
				font-size:14.5px;
				font-family: Tahoma, Verdana, Arial; 
				width:100%;
				border-right: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				border-left: 1px solid #666666;
				border-top: 1px solid #666666;
				padding: 6px 3px;
				margin: 3px 0;
				background: #ddc;
			}
			
			.kontaktformular select {
				width:50%;
			}


			.kontaktformular input:active, .kontaktformular input:focus, .kontaktformular input:hover,
			.kontaktformular textarea:active, .kontaktformular textarea:focus, .kontaktformular textarea:hover,
			.kontaktformular select:active, .kontaktformular select:focus, .kontaktformular select:hover {
				background: #ffff88;
			}

.kontaktformular .errormsg{
	color: #f00;
	font-size: .85rem;
}


.errormsg-spamprotection{
				font-size: 15px;
				color: #db0007; /* Textfarbe */
        text-align: center; /* Textausrichtung zentriert */
        border: 1px solid #db0007; /* Rand des Kästchens */
        padding: 20px; /* Innenabstand des Kästchens */
        width: 100%; /* Breite des Kästchens */
 
}


.errormsg-emailerror{
				font-size: 15px;
				color: #db0007; /* Textfarbe */
        text-align: center; /* Textausrichtung zentriert */
        border: 1px solid #db0007; /* Rand des Kästchens */
        padding: 20px; /* Innenabstand des Kästchens */
        width: 100%; /* Breite des Kästchens */
 
}


.errormsg-upload{
				font-size: 15px;
				color: #db0007; /* Textfarbe */
        text-align: center; /* Textausrichtung zentriert */
        border: 1px solid #db0007; /* Rand des Kästchens */
        padding: 20px; /* Innenabstand des Kästchens */
        width: 100%; /* Breite des Kästchens */

}


input.errordesignfields, textarea.errordesignfields, select.errordesignfields { background-color:#cc3333;}

.captchareload { padding-left:10px;}

#checkid {
  width: auto;
}
#checkid2 {
  width: auto;
}

.buttons{
	text-align: center;
}
	.buttons input { 
		width: 40%;
		margin-top: 20px;
	}
	.captchareload img { background: #555555; color: #fff; border-top:2px solid #fff; border-left:2px solid #fff; border-bottom:2px solid #666666; border-right:2px solid #666666;}
.captchareload img:hover { background: #555555; color: #fff; border-top:2px solid #ddd; border-left:2px solid #ddd; border-bottom:2px solid #fff; border-right:2px solid #fff;}
	
.buttons input { background: #555555; color: #fff; padding-top:4px; padding-bottom:4px; border-top:2px solid #fff; border-left:2px solid #fff; border-bottom:2px solid #666666; border-right:2px solid #666666;}
.buttons input:hover { background: #555555; color: #fff; padding-top:4px; padding-bottom:4px; border-top:2px solid #fff; border-left:2px solid #fff; border-bottom:2px solid #fff; border-right:2px solid #fff;}

.pflichtfeld {
	 color: #800000;
}
	 
.kontaktformular .pflichtfeldhinweis{
	text-align:center;
}

.zurueck {
	color: #6891D1;
}

.kontaktformular .copyright{
	font-size:11px; 
	text-align:center;
}



.kontaktformular input[type="checkbox"] {
				height: calc(0.7rem/16*34);
				width: calc(0.7rem/16*34);
				border: 1px solid #ccc;
				border-radius: .25rem;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;	
				display: block;
				float: left;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				cursor: pointer;
				margin-left: 0px;
}
.kontaktformular input:checked {
				background: url(../img/check-solid.svg) no-repeat center center;
				background-size: 75%;
}
.form{display:flex; flex-direction:column;}

.checkbox-container{width:100%;}




/* style required_notice */

.required_notice{
margin-top:25px;
margin-bottom:32px;
}


button {
	outline: 0;
}


.kontaktformular .senden.loading .label{
	font-size: 18.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .senden.loading .label_failed{
	font-size: 18.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .senden.finished{
		display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 18.5px;
		height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		background-color: #28a745 !important;
		border: none;
		border-radius: 5px;
    pointer-events: none; 
    cursor: not-allowed;
}


.successfully_sent{
font-weight:bold;
font-size:18px;
}


.kontaktformular .senden.failed{
		display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 18.5px;
		height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		border: none;
		border-radius: 5px;
}


@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


.loading-spinner{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.senden.loading .loading-spinner{
	display: flex;
  justify-content: center; 
  align-items: center;
  
}


body.safari .senden.loading .loading-spinner{
	display: flex;
  justify-content: center; 
  align-items: center;
 
}


.senden.loading .loading-spinner_failed{
	display: flex;
  justify-content: center; 
  align-items: center;
  
}


body.safari .senden.loading .loading-spinner_failed{
	display: flex;
  justify-content: center; 
  align-items: center;
  
}


.senden .check{
	display: none;
}


.senden .failed{
	display: none;
}


.senden.finished .check{
	display: inline-block;
	animation: scale 0.5s linear;
}


.kontaktformular #submitMessage.failed {
  font-size: 17px; /* Schriftgröße */
  
  color: #db0007; /* Rote Textfarbe */
  text-align: center; /* Textausrichtung zentriert */
  border: 2px solid #db0007; /* Roter Rand des Kästchens */
  
  padding-left:7px;
  padding-right:7px;
  
  padding-top:15px;
  padding-bottom:10px;
  width: 100%; /* Breite des Kästchens */
  line-height: 1.3; /* Zeilenhöhe */
  margin-top: 15px; /* Abstand nach oben */
  margin-bottom: 35px; /* Abstand nach unten */
}


.kontaktformular #submitMessage.finished {
  font-size: 17px; /* Schriftgröße */
  
  color: #28a745; /* Grüne Textfarbe */
  text-align: center; /* Textausrichtung zentriert */
  border: 2px solid #28a745; /* Grüner Rand des Kästchens */
  
  padding-left:7px;
  padding-right:7px;
  
  padding-top:15px;
  padding-bottom:10px;
  width: 100%; /* Breite des Kästchens */
  line-height: 1.3; /* Zeilenhöhe */
  margin-top: 15px; /* Abstand nach oben */
  margin-bottom: 35px; /* Abstand nach unten */
}


.kontaktformular .senden.loading{
	background-color: #A6A6A6;
	border-color: #A6A6A6;
}


.kontaktformular .senden.failed .failed{
	display: inline-block;
	animation: scale 0.5s linear;
}


#submitMessage.loading{
	text-align: center;
	color: transparent;
	opacity: 0;
}


.senden.finished .check i{
	transform-origin: center center;
}


.opacity-25{
	opacity: .25;
}


.opacity-75{
	opacity: .75;
}









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

body{
	background-color: #FFF;
	padding-top: 10px;
	padding-bottom: 15px;
	padding-right:8px;
  padding-left:8px;
  font-size: 14px;   
  font-family: Tahoma, Verdana, Arial;   
}
.kontaktformular {
								padding-top:1px;
								padding-left:20px;
								padding-right:20px;
								padding-bottom:20px;
							  margin:auto;  
				}


		.kontaktformular label{
			display: block;
			width: 100%;
		}
		.kontaktformular .field{
			display: block;
			width: 100%;
		}
		

/* style required_notice */

.required_notice{
margin-top:28px;
margin-bottom:32px;
}

.loading-spinner{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.kontaktformular .senden.loading .label{
	font-size: 18.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .senden.loading .label_failed{
	font-size: 18.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .senden {
        display: flex;
        justify-content: center; 
        align-items: center;
				width: 100%;
				font-size: 18.5px;
        height: 2.90rem;
				margin-top: calc(1rem/16*5);
				color: white;
				background-color: #26537A;
				transition: background 0.3s ease;
				border: none;
				border-radius: 5px;
}


.kontaktformular .senden:hover {
				background-color: #337ab7;
				cursor: pointer;
}


.kontaktformular .senden.finished{
	  display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 18.5px;
    height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		background-color: #28a745 !important;
		border: none;
		border-radius: 5px;
    pointer-events: none; 
    cursor: not-allowed;
}


.kontaktformular .senden.failed{
		display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 18.5px;
    height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		border: none;
		border-radius: 5px;
}

		
		
		
		
}