@charset "utf-8";
/* CSS Document */
body {
	margin:0;
	padding:0;
	font-size:13px;
	color:#333;
	background:#FFF;
	font-family: 'Roboto', sans-serif;
}

a {color:#333; text-decoration:none;}


a.button {background:#000;  text-transform:uppercase; padding:4px 12px; border:none; font-weight:600;
font-size:14px;color: #FFF; 	transition: background 500ms;}
a.button:hover {	transition: background 500ms;  background:#444;}

#wrapper {width:100%;margin:0 auto; max-width:960px; position: relative;}

#header {background: #000; padding: 23px 3.8%;}
.logo {height:54px; width: auto;}
.slogan {font-size: 12px;color: #FFF; position: absolute; top:38px; right: 4%;}

#formwrap  {padding-top: 50px;}
#form_left {float:left;margin-left: 3.8%;width: 56%; }
#form_right {float:right;margin-right: 3.8%;width: 32%;}

.formtxt {font-size: 15px; margin: 18px 0;line-height: 1.2;}
#successful {font-size:16px; font-weight: 400;}

#form {width:100%;}
.resp {max-width:100%; height:auto;}



#footer {margin-top:34px;text-align: center;color:#333; font-size: 13px; line-height: 1.2; padding: 0 30px;}
#footer p, #successful p {margin-bottom: 10px;}

form.mainform {width:100%; max-width:510px; margin:0 auto;}

/*form contact */
form.mainform > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 6px 0;
}
form.mainform > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form.mainform > div > label,
legend {
  width: 100%;
  display:inline-block;
margin-bottom:5px;
  padding-left: 3px;
  font-weight:400; text-transform:uppercase;

}
form.mainform > div > div,
form.mainform > div > fieldset > div {
  width: 100%;
  float: none;
}
form.mainform > div > fieldset label {
  /* font-size: 90%; */
}
fieldset {
	border: 0;
  padding: 0;
}

form.mainform input[type=text],
form.mainform input[type=email],
form.mainform input[type=url],
form.mainform input[type=password],
form.mainform textarea, form.mainform select {
  width: 100%;
  border: 1px solid #333;
  padding:6px 8px;
  color:#000;
  resize:none;
  font-family:inherit;
  font-size:inherit;
  background:none;
	text-transform: uppercase;
}
form.wht > div > label,
legend {
color:#FFF; text-shadow:1px 1px 2px #333;
}
form.wht input[type=text], form.wht textarea {border-color:#FFF !important; color:#FFF; text-shadow:1px 1px 1px #333}
form > div > label {font-size:14px;}
#sendform {}
form.mainform input[type=submit] {cursor:pointer; background:#000;  text-transform:uppercase; padding:0px !important; border:none; -webkit-appearance: none;
font-weight:600;
font-size:14px;
width:100%; height:30px;
	color: #FFF;
	transition: background 500ms;
}
form.mainform input[type=submit]:hover {
	transition: background 500ms;  background:#444;
}
input.error {border:1px solid #CC0000 !important; background:rgba(0,0,0,0.1) !important;}
select.error {border:1px solid #CC0000 !important; Xbackground:rgba(0,0,0,0.1) !important;}


.tar {text-align:right;}
form.mainform label.error {background:#CC0000;padding:3px; color:#FFF; font-size:11px; float:left;}

form.mainform input[type=text]:focus,
form.mainform input[type=email]:focus,
form.mainform input[type=url]:focus,
form.mainform input[type=password]:focus,
form.mainform textarea:focus {
  outline: 0;
/*  border-color: #4697e4;*/
}

form.mainform select {
	  padding:5px 6px;
	width:100%;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background:url(../images/seldd.png) no-repeat right center #FFF;

}

form.mainform select::-ms-expand {
    display: none;
}
form.mainform .calicon {background:url(../images/calicon.png) no-repeat right center #FFF; cursor:pointer;}

@media (max-width: 600px) {
  form.mainform  > div {
    margin: 0 0 6px 0;
  }
  form.mainform  > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form.mainform  > div > div,
  form.mainform  > div > fieldset > div {
    width: 100%;
    float: none;
  }
  form.mainform input[type=text],
  form.mainform input[type=email],
  form.mainform input[type=url],
  form.mainform input[type=password],
  form.mainform textarea,
  form.mainform select {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  form.mainform form > div > label,
	legend {
  	text-align: left;
  }
}


@media (max-width: 600px) {
#header {padding: 18px 3%;}
.logo {height:44px; width: auto;}
.slogan {font-size: 12px; top:33px; right: 3%;}

#formwrap  {padding: 28px 22px 0 22px;}
#form_left {float:none;margin-left: 0%;width: 100%; margin-bottom: 24px;}
#form_right {float:none;margin-right: 0%;width: 100%; text-align: center;}

.formtxt {font-size: 14px; margin: 16px 0;line-height: 1.2;}
#successful {font-size:16px; font-weight: 600;}

#footer {margin-top:24px;font-size: 12px; padding: 0 18px;}
#footer p {margin-bottom: 10px;}
}

@media (max-width: 440px) {
#header {padding: 13px 3%;}
.logo {height:40px; width: auto;}
.slogan {font-size: 11px; top:24px; right: 3%;}
}