/* === Remove input autofocus webkit === */ 
*:focus { outline: none; } /* === Form Typography === */ 
.contact_form h2, .contact_form label {  } 
.form_hint, .required_notification { font-size: 11px; } /* === List Styles === */ 
.contact_form ul { width: 100%; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; } 
.contact_form li { padding: 12px; border-bottom: 1px solid #eee; position: relative; } 
.contact_form li:first-child, .contact_form li:last-child {   } /* === Form Header === */ 
.contact_form h2 { margin: 0; display: inline; } 
.required_notification { position:relative; padding-bottom:20px; color: #d45252;  float: right; } /* === Form Elements === */ 
.contact_form label { width: 150px; margin-top: 3px; display: inline-block; float: left; padding: 3px; } 
.contact_form input { height: 20px; width: 220px; padding: 5px 8px; } 
.contact_form textarea { padding: 8px; width: 220px; } 
.contact_form button { margin-left: 280px; } /* form element visual styles */
.contact_form input, .contact_form textarea { border: 1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius: 2px; padding-right: 30px; -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; } 
.contact_form input:focus, .contact_form textarea:focus { background: #fff; border: 1px solid #555; box-shadow: 0 0 3px #aaa; padding-right: 70px; } /* === HTML5 validation styles === */ 
.contact_form input:required, .contact_form textarea:required { background: #fff url(images/red_asterisk.png) no-repeat 98% center; } .contact_form input:required:valid, .contact_form textarea:required:valid { background: #fff url(images/valid.png) no-repeat 98% center; box-shadow: 0 0 5px #15b0dd; border-color: #15b0dd; } 
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { background: #fff url(images/invalid.png) no-repeat 98% center; box-shadow: 0 0 5px #d45252; border-color: #b03535; } /* === Form hints === */
.form_hint { background: #28BBE6; border-radius: 3px 3px 3px 3px; color: white; margin-left: 8px;   z-index: 999; padding:4px 10px; text-align:left; /* hints stay above all other elements */ position: absolute; /* allows proper formatting if hint is two lines */ display: none; } .form_hint::before { content: "\25C0"; color: #28BBE6; position: absolute; top: 3px; left: -6px; }
.contact_form input:focus + .form_hint { display: inline; }
.contact_form input:required:valid + .form_hint { background: #15b0dd; }
.contact_form input:required:valid + .form_hint::before { color: #15b0dd; } /* === Button Style === */
button.submit {
	background-color: #0ea1ff;
	 
	border: 1px solid #148ad6; 
	border-radius: 3px;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover { opacity: .85; cursor: pointer; }
button.submit:active { border: 1px solid #67bcf3; box-shadow: 0 0 10px 5px #148ad6 inset; -webkit-box-shadow: 0 0 10px 5px #148ad6 inset; -moz-box-shadow: 0 0 10px 5px #148ad6 inset; -ms-box-shadow: 0 0 10px 5px #148ad6 inset; -o-box-shadow: 0 0 10px 5px #148ad6 inset; }

.men_ok{position:relative; background: url(../images/ok.png) no-repeat center left; width:100%; padding:10px 0 0 30px; color:#090; font-style:italic; font-size:14px; font-family:Arial, Helvetica, sans-serif; display:block;}

.men_er{position:relative; background: url(../images/ko.png) no-repeat center left; width:100%; padding:10px 0 0 30px; color:#f00; font-style:italic; font-size:14px; font-family:Arial, Helvetica, sans-serif; display:block;}

@media screen and (max-width: 540px) {
	
.contact_form ul { width: 96%; padding-left:0px; margin-left:0px;  }  
.contact_form li { padding:0px 2% 0px 0; border:none;margin-left:0px;  } 
.contact_form label { width: 95%;  } 
.contact_form input { width: 95%;  } 
.contact_form textarea { width: 95%; } 
.contact_form button { margin-left: 25%; margin-bottom:100px; } 
.contact_form input:focus, .contact_form textarea:focus { padding-right: 30px; }
}