/* Form input */
.feedback_input{
	color:#3c3c3c; font-family: Helvetica, Arial, sans-serif; font-weight:500;
	font-size:18px; border-radius:0; line-height: 22px; background-color: #fbfbfb;
	padding:13px 13px 13px 54px; margin-bottom:10px; width:100%; -webkit-box-sizing:border-box; 
	-moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border:3px solid rgba(0,0,0,0);}

.feedback_input:focus	{background-color:#fff; box-shadow:0; border:3px solid #3498db; color:#3498db; outline:none; padding:13px 13px 13px 54px;}
.focused							{color:#30aed6; border:#30aed6 solid 3px;}
.form_input 					{background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.captcha_img 					{float:left; height:54px; margin-top:20px; margin-right:20px;}

textarea 			{width:100%; height:200px; line-height:150%; resize:vertical;}
#form_div 		{background-color:#879399; padding:35px 35px 50px 35px; width:80%; margin-top:15px; -moz-border-radius:7px; -webkit-border-radius:7px;}
.firstname		{background-image:url(../images/icons/firstname.svg); 	background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.lastname			{background-image:url(../images/icons/lastname.svg); 		background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.company_name	{background-image:url(../images/icons/company_name.svg);background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.password			{background-image:url(../images/icons/password.svg); 		background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.password2		{background-image:url(../images/icons/password2.svg); 	background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.zip					{background-image:url(../images/icons/zip.svg); 				background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.address			{background-image:url(../images/icons/address.svg); 		background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.address2			{background-image:url(../images/icons/address2.svg); 		background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.city					{background-image:url(../images/icons/city.svg); 				background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.email				{background-image:url(../images/icons/email.svg); 			background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.phone				{background-image:url(../images/icons/phone.svg); 			background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.fax					{background-image:url(../images/icons/fax.svg); 				background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.mobile				{background-image:url(../images/icons/mobile.svg); 			background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.web					{background-image:url(../images/icons/web.svg); 				background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.comment			{background-image:url(../images/icons/comment.svg); 		background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}
.keyword			{background-image:url(../images/icons/keyword.svg); 		background-size:30px 30px; background-position:11px 8px; background-repeat:no-repeat;}

/* Input fields */
input:hover, textarea:hover,
input:focus, textarea:focus {background-color:white;}

#form_div input:required:invalid 		{border-color:#f98175; background-color:#f98175;}
#form_div input:required:valid 			{border-color:#8bceeb; background-color:#8bceeb;}
#form_div input:required:invalid::-webkit-input-placeholder {color:white;}
#form_div input:required:invalid::-moz-placeholder 					{color:white;}
#form_div input:required:invalid:-ms-input-placeholder 			{color:white;}

#form_div textarea:required:invalid {border-color:#f98175; background-color:#f98175;}
#form_div textarea:required:valid 	{border-color:#8bceeb; background-color:#8bceeb;}
#form_div textarea:required:invalid::-webkit-input-placeholder {color:white;}
#form_div textarea:required:invalid::-moz-placeholder 					{color:white;}
#form_div textarea:required:invalid:-ms-input-placeholder 			{color:white;}

#button_submit{
	font-family:'Montserrat', Arial, Helvetica, sans-serif;
	float:left;
	width:100%;
	border:#fbfbfb solid 4px;
	cursor:pointer;
	background-color:#3498db;
	color:white;
	font-size:24px;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
  margin-top:-4px; font-weight:700;}

#button_submit:hover			{background-color:rgba(0,0,0,0); color:#0493bd;}
.submit_send:hover 				{color:#3498db;}
.ease 										{width:0px;	height:74px; background-color:#fbfbfb; -webkit-transition:.3s ease; -moz-transition:.3s ease;	-o-transition:.3s ease;	-ms-transition:.3s ease; transition:.3s ease;}
.submit_send:hover .ease	{width:100%; background-color:white;}

.select_field {width:30%;}

/* Rating system */
.rating {
    float:left;
}

/* Rating */
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: gold;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ffb700;
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

/* Media queries for responsive webdesign */
@media only screen and (max-width:480px){
	#form_div 				{width:100%; padding:15px 0px 15px 0px;}
	.spacer2 					{background-color:#879399;}
	.select_field 		{width:90%;}
}

@media only screen and (min-width:481px) and (max-width:640px){
	.select_field {width:90%;}
}

@media only screen and (min-width:641px) and (max-width:960px){
	.select_field 	{width:90%;}
	.inout_keyword 	{width:48.5%; margin-right:1%;}
}

@media only screen and (min-width:961px) and (max-width:1024px){
	.select_field 	{width:90%;}
	.inout_keyword 	{width:48.5%; margin-right:1%;}
}

@media only screen and (min-width:1025px) and (max-width:1280px){
	.select_field 	{width:30%;}
	.inout_keyword 	{width:32%; margin-right:1%;}
}

@media only screen and (min-width:1281px){
	.select_field 	{width:30%;}
	.inout_keyword 	{width:32%; margin-right:1%;}
}