/* ************************************************************************************************************************************ */
/* -------------------------------------- (C) Copyright 2016/2017 by machtWeb | Reinhard Lange ---------------------------------------- */
/* ------------------------------------------------- machtWeb.de | imail@machtweb.de -------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
/* update	->																											5.00/00	- 26.05.17
/* file 	-> design/css/function/contact.css
/* info		-> mobile friendly form elements
/* link		-> http://codepen.io/stephaniewalter/pen/eZvpeV |Created March 19, 2016 // Updated March 21, 2016							*/
/*			-> https://css-tricks.com/textarea-tricks																					*/
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
/* doku		-> https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables														*/
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
:root {

	--label-txt-col: #999;
	--label-tab-txt: #fff;						/* for tabs only */
	
	--main-col: #999;
	--main-bgr: #E77817; 						/* customer -> blue */
	--main-bdr: #ccc;
	
	--input-line: 1px solid rgba(0,0,0,.08);	/* border-bottom only */
	--input-caret: #E77817;						/* customer -> blue | default -> #cc0000 */
	
	--tabs-bdr-rad:2px 2px 0 0;					/* border-radius for label-tabs */ 
	
	--letter-1-bg: #fff; 		/* contact | letter // ! transparent not possible ! */
	--letter-2-bg: #fafafa;
	--letter-3-bg: #f6f6f6;
	--letter-border: 1px solid rgba(0,0,0,0.25); 
	}

form {
	display:inline-block;
	width:95%;
	max-width:640px;
	margin-left:1em;
  	margin-right:auto;
  	padding:1em;
	border: 0px solid #8D8D8D;
	z-index:-2;
	}

.contact {
	margin:0 auto;
	padding:2em;
	background:#fff;
	background:var(--letter-1-bg, #fff);
  	/*border: 1px solid orange;*/
  	border: 1px solid rgba(0,0,0,.2);
  	box-shadow:0 0 4px rgba(0,0,0,.3);
	}

.contact_frame {
	padding: 4px;
	/*border: 1px solid orange;*/
	border: 1px solid rgba(0,0,0,.1);
	}

fieldset {
	margin:0 auto;
	padding: 0px;
	border: 0px solid rgba(0,0,0,.1);
	}
	

input {
	/*background: #f5f5f5;*/
	background:rgba(245,245,245,1);
	border:1px solid;
	border-width:0 0 1px 0;
	border-bottom-color:rgba(0,0,0,.1); 
	transition: border-bottom-color 1s;
	outline:none !important; /* to avoid dotted border when active */
	}
	
/*input:last-child {margin-bottom:0}*/

/* nice2have-> https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color */
/* link		-> https://stackoverflow.com/questions/7339333/styling-text-input-caret */

input {
	caret-color: #cc0000;
	caret-color: var(--input-caret, #cc0000);
	}
	
input			{transition:background-color 1s ease-out;}
textarea		{transition:background-color 1s ease-out;
/*	-webkit-hyphens: auto;
  	   -moz-hyphens: auto;
  		-ms-hyphens: auto;
  			hyphens: auto;
*/
	}
input:hover		{background:rgba(0,0,0,.09) !important;}
textarea:hover	{background:rgba(0,0,0,.09) !important;}
	
/* -------------------------------------------------------------------------------------------------------------------- 5.00/00	- 25.05.17
/* LABEL																																*/
/* info		-> MFL => material floating label																							*/
/* link		-> http://codepen.io/devtips/pen/bNBNBw | Created December 31, 2014 // Updated January 02, 2015 							*/
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.input-group {
  	position:relative;
  	display:inline-block;
	width:100%;
	margin:10px auto;
	border: 0px solid green;
	}
.input-group input {
	width:100%;
  	padding:.25em 0 .25em;
	border:1px solid #ccc;
	border:var(--input-line);
	border-width:0 0 1px 0;
	font-size:.95em;
	color:rgba(0,0,0,.75);
	}

/* LABEL */	
.input-group label {
  	position:absolute;
  	top:48%;
  	left:8px;
  	color:#999;
	color:var(--label-txt-col, #999);
  	pointer-events:none;
  	-webkit-transform:translateY(-50%);
  	transform:translateY(-50%);
  	-webkit-transition:all 0.15s ease-out 0s;
  	transition:all 0.15s ease-out 0s;
	}
.input-group input:focus + label,
.input-group input.has-value + label {
  	top:-16px; /* min -16px max. -20px */
 	width:auto;
  	padding:2px 8px;
  	border-radius:2px 2px 0 0;
	border-radius:var(--tabs-bdr-rad, 2px 2px 0 0 );	
  	font-size:.8em;
  	background:#787878;
	background:var(--main-bgr, #787878);
   	color:#fff;
	color:var(--label-tab-txt, #fff);
  	transform:translateX(-8px);
  	transition:all 0.2s ease;
	}

/* TEXTAREA */	
.input-group label.textarea_corr {
  	position:absolute;
  	top:1.4em; /*14%;*/
  	left:8px;
  	pointer-events: none;
  	-webkit-transform: translateY(-50%);
  	transform: translateY(-50%);
  	-webkit-transition: all 0.15s ease-out 0s;
  	transition: all 0.15s ease-out 0s;
	}
.input-group textarea:focus + label,
.input-group textarea.has-value + label {
  	top:-12px;
 	width:auto;
  	padding:2px 8px;
  	border-radius:2px 2px 0 0;
	border-radius:var(--tabs-bdr-rad, 2px 2px 0 0 );	
  	font-size:.8em;
  	background:#787878;
	background:var(--main-bgr, #787878);
   	color:#fff;
	color:var(--label-tab-txt, #fff);
  	transform: translateX(-8px);
  	transition: all 0.2s ease;
	}

/* -------------------------------------------------------------------------------------------------------------------- 5.00/00	- 16.06.17
/* TEXTAREA																																*/
/* info		-> 
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.input-group textarea {
	width:93.5%;
	margin:4px 0 0 0;
	padding:1em; 				/* fixes text jump on ENTER keypress */
    line-height:20px;
	font-size:1em;
	font-weight:lighter;
	font-family:'MS Shell Dlg \32',sans-serif;
	border:var(--input-line);
	/*background: #f5f5f5;*/
	background:rgba(245,245,245,1);
	    
	outline:none !important; 	/* to avoid dotted border when active */
    overflow-y:hidden; 			/* fixes scrollbar flash */
	resize:vertical; 
	}
	
.textarea_add {margin-top:1em;}


/* -------------------------------------------------------------------------------------------------------------------- 5.00/00	- 25.05.17
/* BUTTON																																*/
/* info		-> 
/* ------------------------------------------------------------------------------------------------------------------------------------ */

/* link		-> http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input */
/* 			-> http://jsfiddle.net/s5GVh | http://jsfiddle.net/XwPTa | http://www.bootply.com/86446 */

/*
button[type="button"] 
	{
	left:-1px;
    width: 32px;
    height: auto;
    margin-left: -32px;
	vertical-align:middle;
	border:1px solid #ccc;
	border-width: 0 0 0 1px;    
	}
*/
button {
	width: 100%;
	height: 2.2em;
	margin: 0px auto;
	padding: 4px;
	float: left;
	font-size: 1em;
	font-weight:lighter !important;
	border:none !important;
	color: #636363;
	background:#ccc;
	-webkit-appearance: none;
	}

.button_form {
	cursor:pointer;
	}
.button_submit {
	color: #636363 !important;
	}
.button_submit:hover {
	background:#E77817;
	color:#fff !important;
	}
.button_delete:hover {
	background:#cc0000;
	color:#fff;
	}
.button_message:hover {
	background:orange;
	color:#fff;
	}
	
.flex-buttons {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
	}
.flex-buttons-items {
	width: 32%;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
	padding:0 1px;
	}
	
.flex-items {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
	}
.flex-input-items {
	width: 49%;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
	margin: 12px 2px 6px 0;
	}
	
.items_auto {
	position: relative;
	top: 8px;
	margin: 6px auto;
	margin-right: 12px;
	border: 0px solid red;
	}

/* PLACEHOLDER */
/* info		-> placeholder position AND color only */
/* link		-> https://css-tricks.com/almanac/selectors/p/placeholder */	
input 								{text-indent:12px;}
/*	
input:-moz-placeholder 				{color: blue;}
input::-moz-placeholder 			{color: blue;}
input::-webkit-input-placeholder 	{color: blue;}
input:-ms-input-placeholder 		{color: blue;}
*/
::placeholder 						{color:rgba(0,0,0,.4);}
	
/* ------------------------------------------------------------------------------------------------------------------- 5.00/00	- 25.05.17
/* BUTTON	DISABLED					 																								*/
/* info		-> disable submit when fields (textarea) are empty																			*/
/* link		-> http://codepen.io/zvona/pen/hnFAH | Created October 15, 2014																*/
/* ------------------------------------------------------------------------------------------------------------------------------------ */
:disabled {background:#cc0000;color:#fff !important; cursor:no-drop;}
/*
button:enabled:not([type="reset"]) {background:green !important;}
*/
	
/* ------------------------------------------------------------------------------------------------------------------------------------ */
/* counter																																*/
/* info		-> additional counter for MIN and MAX charachters within TEXTAEREA 															*/
/*			-> jQuery textarea with characters counter and min length to show the submit button 										*/
/* link		-> http://codepen.io/AmrSubZero/pen/jfhlI | Created October 04, 2013 // Updated October 09, 2013 							*/
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.line_counter {margin:-8px 0 4px 0; border: 1px solid #ccc;border-width: 0 0 1px 0;}

#counter_max, #counter_min {
	float:right;
	width:auto;
	height:auto;
	margin-top:3px;
	padding:0 4px;
	color:#999;
	color:var(--label-txt-col, #999); 
	font-size:.8em;
	}
#counter_min 		{float:none;}
#counter_min span 	{color:#999;color:var(--label-txt-col,#999);}

/* -------------------------------------------------------------------------------------------------------------------- 5.00/00	- 25.05.17
/* SALUTATION																															*/
/* info		-> 
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.salutation {
	/*display:inline-block;*/
	width:auto;
	margin:6px auto;
	margin-bottom: 10px;
	padding-left: .5em;
	border: 0px solid blue;
	color:#999;
	color: var(--label-txt-col, #999);
	}

.radio_middle {
	position:relative;
	top:0;
	left:-6px;
	margin:0 6px 0 0;
	}
	
/* link		-> https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten */
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  	position:relative;
  	visibility:hidden;
  	margin:0;
  	padding:0;
  	background:transparent;
	}

input[type='checkbox'] + label,
input[type='radio'] + label {
  	cursor:pointer;
	}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:'';
    position:relative;
    top:2px;
    display:inline-block;
    width:16px;
    height:16px;
    border:1px solid;
	border-color: #ccc;
	border-color:var(--main-bdr, #ccc);
    background:#fff;
    box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.1);
	}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  	border-radius:24px;
  	margin-right:6px;
	}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  	background: #ccc;
	background:var(--main-bdr, #ccc);
  	box-shadow:inset 0 0 0 2px #fff;
	}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  	background: #787878;
	background:var(--main-bgr, #787878);
  	box-shadow:inset 0 0 0 2px #fff;
	}

/* for		-> one-line */	
.input_inline {
	width: 100%;
	margin: 10px auto;
	border: 0px solid orange;
	}
	
/* for		-> City */
.input_third {
	width: 83%;
	margin: 0 auto;
	border: 0px solid blue;
	}
		
/* for		-> Phone | Mobil ... */
.input_half {
	width: 45%;
	margin: 0 auto;
	border: 0px solid blue;
	}

/* for		-> PLZ and Nr. */	
.input_small {
	width: 15%;
	margin: 0 auto;
	border: 0px solid blue;
	}
		
.input_space_left 	{ margin: 0 0 0 4px;}
.input_space_right	{ margin: 0 4px 0 0;}
.input_float_left	{ float: left; }
.input_float_right	{ float: right; }

/* link		-> http://pattern.tfcpc.de/pattern-tutorial.php */	
input:invalid 	{color:#cc0000;}
/*input:valid		{color:green;}*/


/* -------------------------------------------------------------------------------------------------------------------- 5.00/00 - 25.05.17
/* input_bar	-> animation - line-bottom - when HOVER from CENTER to LEFT and RIGHT 													*/
/* set			-> 0 = no | 1 = yes																										*/
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.input_bar:after {
  	content:'';
  	position:absolute;
  	bottom:0;
  	left:0;
  	width:0%;
  	border-bottom:1px solid #999;
	border-bottom:1px solid var(--main-bgr, #999);
  	transform: scaleX(0.0001);  
  	/*transition: transform 500ms ease-in-out;*/
  	transition: 0.5s;
	}
.input_bar:hover:after	{width:100%;transform: scaleX(1);}
	
/* -------------------------------------------------------------------------------------------------------------------- 5.00/00 - 25.05.17
/* LETTER																	 															*/
/* info		-> design for background => 3 letters																						*/
/* link		-> http://codepen.io/mlms13/pen/LKFoy | Created October 09, 2012															*/
/* ------------------------------------------------------------------------------------------------------------------------------------ */
.letter {
  	position:relative;
  	width:95%;
	z-index:0;
	}
.letter:before, .letter:after {
  	content:'';
  	position:absolute;
  	width:100%;
  	height:98%;
	z-index:-1;
	}
/* paper-stack 2nd */
.letter:before {
  	top:4px;
  	left:-5px;
	border:var(--letter-border, #ccc);
  	box-shadow:0 0 4px rgba(0,0,0,0.2);
  	background:var(--letter-2-bg, #fafafa);
	transform:rotate(-1.8deg);
	}
/* paper-stack 3rd */
.letter:after {
  	top:1px;
  	right:-3px;
	border:var(--letter-border, #ccc);
  	box-shadow:0 0 2px rgba(0,0,0,0.2);
	background:var(--letter-3-bg, #f6f6f6);
    transform:rotate(1deg);
	}
	
.thanks {
	display:inline-block;
	width:94%;
	max-width:640px;
	margin-left:1em;
  	margin-right:auto;
  	padding:1em;
	border: 0px solid red;
	z-index:0;
	}
/* TABLE */	
.thanks .thanks_contact {
	width:100%;
	margin:0 auto;
	padding:0;
	border: 0px solid orange;
	}
	
.thanks .thanks_contact td {
	margin:2px auto;
	padding:2px 4px;
	color: rgba(0,0,0,.7);
	}

.mail_text {
	border: 1px solid rgba(0,0,0,.04);
	border-radius: 4px;
	background: rgba(0,0,0,.02);
	}
		
.mail_copy {
	white-space:nowrap;
	text-align: center;
	border: 1px solid rgba(0,0,0,.04);
	border-radius: 4px;
	background: rgba(0,0,0,.02);
	}

/* for the message date/time */
.right {
	position:absolute;
	right: 38px;
	display: inline-block;
	text-align: right;
	border: 0px solid blue;
	}
			
.contact .hr_line
	{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: var(--input-line, #ccc);
	border-width: 0 0 1px 0;
	}

/* ------------------------------------------------------------------------------------------------------------------- 5.00/00 - 28.03.16
/* GMAP		-> without border 																											*/
/* info		-> with preload of 2 different background-images AND zomm by hover															*/
/*			-> will be replaced after input of ADRESS /autocomplete powered by google													*/			
/* link		-> http://staticmapmaker.com/google																							*/
/* ------------------------------------------------------------------------------------------------------------------------------------ */
#map_contact {
  	min-height: 256px;
	width: 50%;
	float: right;
	margin: 6px auto;
	border: 1px solid;
	border-color: #ccc;
	border-color: var(--main-bdr, #ccc);
	border-radius: 4px;
	background-color:rgba(255,255,255,.1);
	/* image	-> fall-back */
/*	background-image:	url('//maps.googleapis.com/maps/api/staticmap?center=Frankfurt,+Airport&zoom=13&scale=false&size=480x480&maptype=roadmap&format=png&visual_refresh=true');
	background-size: 100%;
	background-size: cover;
*/	
	/* image	-> client -> image-1 => 265x256 | image-2 => 480x480 */
	background-image: 	url('../../../../content/image_de/main/kontaktformular/logo_company.png'); /* , */
						/*url('../../../../content/image_de/main/kontaktformular/logo_company_trans_text.png'),*/
						/*url('../../../../content/image_de/main/kontaktformular/map_01.jpg');*/
  	background-size: 75%, 110%;
	background-repeat: no-repeat;
  	background-position: center center;
  	transition: all 0.8s ease-in-out;
 	}

#map_contact:hover {
	background-size: 85%, 100%;
	border: solid 1px rgba(0,0,0,.4);
	}

	
@media (min-width: 320px) and (max-width: 1199px) {
.small_no		{display: none;}
#map_contact 	{display: none;}
}

.nobreak		{white-space: nowrap;}

/* -------------------------------------------------------------------------------------------------------------------- 5.00/00	- 25.05.17
/* NOSEE																	 															*/
/* info		-> INPUT-FIELD 'nosee' => invisible / SPAM-Protection																		*/
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
.nosee {display:none;border:1px solid red;}

/* ------------------------------------------------------------------------------------------------------------------------------------	*/