/* import material-icons */

@import '../fonts/material-icons.css';
@import '../fonts/open-sans.css';





/* common styles */

* {
				box-sizing: border-box;
}


body {
				margin: 0;
				background-color: #FFFFFF;
				padding: 30px 25px 20px 25px;
				overflow-x: hidden;
}


body,
textarea,
input,
.select {
				font-family: Open Sans, Arial, sans-serif;
				font-size: 0.9rem;
}


.senden {
				font-family: Open Sans, Arial, sans-serif;
				font-size: 1.0rem;
}


.kontaktformular {
				width: 100%;
				max-width: 100%;
}





/* style common rows/grid */

.kontaktformular .row {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 1.7rem;
				width: 100%;
}


.kontaktformular .row .col-sm-4 {
				flex-grow:1;
				flex-basis: 0;
				margin: 0 1.2rem;
				position: relative;
}


.kontaktformular.no-icons .row .col-sm-4 { /* separate style for template WITHOUT icons */
margin: 0 1.7rem;

}


.kontaktformular .row .col-sm-4:first-child {
	margin-left: 0;
}


.kontaktformular.no-icons .row .col-sm-4:first-child { /* separate style for template WITHOUT icons */
	margin-left: 0;
}


.kontaktformular .row .col-sm-4:last-child {
	margin-right: 0;
}


.kontaktformular.no-icons .row .col-sm-4:first-child { /* separate style for template WITHOUT icons */
	margin-left: 0;
}


.kontaktformular .row .col-sm-8 {
				width: 100%;
				position: relative;
}





/* style common labels */

.kontaktformular .row .control-label {
				position: absolute;
				margin-top: -8.5px; height: 95.4%;
				padding: 0.8rem;
				color: grey;
				opacity: 0.7;
				width: 3rem;
				z-index: 2;
}


body.safari .kontaktformular .row .control-label{
     margin-top: 0.15rem; 
}


.kontaktformular .row .control-label span{
		position: absolute;
		top: 1.3rem;
		left: 3.8rem;
		white-space: nowrap;
		-webkit-transition: top .3s, font-size .3s, color .3s;
		transition: top .3s, font-size .3s, color .3s;
	}
	
	
.kontaktformular.no-icons .row .control-label span{ /* separate style for template WITHOUT icons */
	left:1.1rem;
}	


body.safari .kontaktformular .row .control-label span{
		position: absolute;
		top: 0.8rem;
		left: 3.8rem;
		white-space: nowrap;
		-webkit-transition: top .3s, font-size .3s, color .3s;
		transition: top .3s, font-size .3s, color .3s;
	}


.kontaktformular .row .control-label:not(.select-label) span{
	cursor: text;
}


body.safari .kontaktformular .row .control-label.select-label span{
		top: 1.0rem;
}


body.safari .kontaktformular .row .select-label{
     margin-top: -0.06rem; 
}


.kontaktformular .row .control-label i{
		-webkit-transition: color .3s;
		transition: color .3s;
}
	

.kontaktformular .row .not-empty-field .control-label i{
	color: rgba(0,0,0,0.87);
}


body.safari .kontaktformular .row .not-empty-field .control-label i{
	color: rgba(0,0,0,0.87) !important;
}


.kontaktformular .row .not-empty-field .control-label span{
	color: grey;
	top: 0rem;
	font-size: 0.7rem;
}


body.safari .kontaktformular .row .not-empty-field .control-label span{	/* Labels im inaktiven aber nicht leeren Zustand */
	color: grey !important;
	top: -6px !important;
	font-size: 0.7rem !important;
}


.kontaktformular .row .active-field .control-label i{
	color: #26a69a;
}


body.safari .kontaktformular .row .active-field .control-label i{
	color: #26a69a !important;
}


.kontaktformular .row .active-field .control-label span{
	color: #26a69a;
	top: 0rem;
	font-size: 0.7rem;
}


body.safari .kontaktformular .row .active-field .control-label span{	/* Labels im aktiven Zustand */
	color: #26a69a !important;
	top: -6px !important;
	font-size: 0.7rem !important;
}









/* style common fields */

.kontaktformular .row input,
.kontaktformular .row textarea {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
}


.kontaktformular .row .field {
				display: block;
				font-size: 0.9rem;
				width: calc(100% - 3.8rem);
				padding: .85rem .8rem 0.55rem 0;
				margin-left: 3.8rem;
        color: rgba(0,0,0,0.87);
				border: none;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #9e9e9e !important;

				outline: none;
				-webkit-box-sizing: content-box;
				box-sizing: content-box;
				-webkit-transition: border .3s;
				transition: border .3s;
				-webkit-appearance: none;
				border-radius: 0px;
				-webkit-border-radius:0px;
}


.kontaktformular.no-icons .row .field { /* separate style for template WITHOUT icons */
	margin-left:1.1rem;
	width: calc(100% - 1rem);
}


body.safari .kontaktformular .row .field {
    padding: .95rem .8rem 0.55rem 0;
}


.kontaktformular .row .field:focus,
.kontaktformular .row input[type="checkbox"]:focus {
				border-bottom-color: #26a69a !important;
				outline: 0 !important;
				box-shadow: none;
				
}






/* style textarea */

.kontaktformular .row .textarea-label{
}


body.safari .kontaktformular .row .textarea-label{
     margin-top: 0.13rem; 
}


.kontaktformular .row textarea.field {
				min-height: 2.5rem;	
				height: 8.5rem;
				width: calc(100% - 3rem);
}


.kontaktformular.no-icons .row textarea.field{ /* separate style for template WITHOUT icons */
	width: calc(100% - .2rem);
}





/* style selectbox */

.kontaktformular .row ul.select-box{
	list-style: none;
	margin: 0;
	background: #fff;
	cursor: pointer;
	position: absolute;
	top: -0.3rem;
	left: 3.8rem;
	z-index:5;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
	padding: 0;
	width: calc(100% - 3rem);
	-webkit-transform: scale(0);
	transform: scale(0);	
	opacity: 0;
	-webkit-transition: -webkit-transform .3s, transform .3s, opacity .3s;
	transition: -webkit-transform .3s, transform .3s, opacity .3s;
}


.kontaktformular.no-icons .row ul.select-box{ /* separate style for template WITHOUT icons */
	left: 1.1rem;
	width: calc(100% - 0rem);
}


	.kontaktformular .row ul.select-box .placeholder{
		color: grey;
		opacity: 0.7;
	}


	.kontaktformular .row .active-field ul.select-box{
		-webkit-transform: scale(1);
		transform: scale(1);	
		opacity: 1;
	}
	
	
	.kontaktformular .row .select-input{
		cursor: default;
	}
	
	
	.kontaktformular .row ul.select-box li{
		list-style: none;
		padding: 11px 15px;
		color: #26a69a;
		width: 100%;
	}
	
	
	.kontaktformular .row ul.select-box li:hover,
	.kontaktformular .row ul.select-box li.active{
		background: #eee;
	}
	
	
	.kontaktformular:not(.no-icons) .row .keyboard_arrow_down{
		display: none;
	}






/* style rows with complex contents  */

.kontaktformular .captchareload .material-icons{
	font-size: 20px;
}


.kontaktformular .captcha-row div div:not(.captcha-input-div),
.kontaktformular .question-row div div:not(.question-input-div){		
				width: 100%;
				padding: .75rem 0 .75rem 60px;		
}


body.safari .kontaktformular .captcha-row .control-label span{
		position: absolute;
		top: 0.7rem;
		left: 3.8rem;
		white-space: nowrap;
		-webkit-transition: top .3s, font-size .3s, color .3s;
		transition: top .3s, font-size .3s, color .3s;
	}
	
	
body.safari .kontaktformular .question-row .control-label span{
		position: absolute;
		top: 0.7rem;
		left: 3.8rem;
		white-space: nowrap;
		-webkit-transition: top .3s, font-size .3s, color .3s;
		transition: top .3s, font-size .3s, color .3s;
	}	
		

.kontaktformular.no-icons .captcha-row div div, /* separate style for template WITHOUT icons */
.kontaktformular.no-icons .question-row div div{		
				padding: .75rem 0 .75rem 1rem;
}


.kontaktformular .captcha-row .captcha-input-div,
.kontaktformular .question-row .question-input-div{		
	padding-bottom: 0;
}


.kontaktformular.no-icons .captcha-row .captcha-input-div, /* separate style for template WITHOUT icons */
.kontaktformular.no-icons .question-row .question-input-div{		
	padding-top: 0;
}


.kontaktformular.no-icons .captcha-row .captcha-input-div, /* separate style for template WITHOUT icons */
.kontaktformular.no-icons .question-row .question-input-div{		
	padding-bottom: 0;
}

	




/* style upload-fields  */

.kontaktformular .row #files{
	margin-left: 3.8rem;
	width: calc(100% - 1.2rem);
}


.kontaktformular.no-icons .row #files{ /* separate style for template WITHOUT icons */
	margin-left:1.1rem;
	width: calc(100% - .2rem);
	z-index: 5;
	position: relative;
}


	.kontaktformular .row #files > div{
		margin-bottom: 5px;
	}
	
	
		.kontaktformular .row #files label{
			height: 41px;
			display: inline-block;
			width: calc(100% - 1.8rem);
			cursor: pointer;
		}
		
		
		.kontaktformular.no-icons .row #files label{ /* separate style for template WITHOUT icons */
			width: 100%;
		}
		
		
		.kontaktformular .row #files .file_button{
			display: block;
			float: left;
			margin-top: calc(1rem/16*4);
			margin-right: .5rem;
			padding: .5rem .75rem;
			color: white;
			back