#contact, #contact-details {width:49%;}
#contact h4, #contact-details h4 {padding:0 0 0.5em;margin:0;}
#contact {float:left;}
#contact-details {float:right}
#contact textarea {width:99%;}
#contact input[type=text] {width:99%;}
#contact label {display:block}
#contact .submit-button {float:right;margin-top:4px;}
#contact .tble {display:table}
#contact .tblerow {display:table-row}
#contact .leftcell, #contact .rightcell {display:table-cell;width:50%;box-sizing:border-box;-moz-box-sizing:border-box;}
#contact .leftcell {padding:0 0.8em 0 0}
#contact .rightcell {padding:0 0 0 0.8em}

table.contactDetails {	border-collapse: collapse;}
table.contactDetails th, table.contactDetails td {	text-align: left;	white-space:nowrap;	vertical-align: top !important;}
table.contactDetails th {	padding: 2px 4px;	font-weight: bold;}
table.contactDetails td {	padding: 2px 2px 2px 8px;}

@media only screen and (max-width: 60em) { /*960*/
	#contact, #contact-details {float:left;}
	table.contactDetails, table.contactDetails tbody, table.contactDetails tr, table.contactDetails td, table.contactDetails th {display:block}
	table.contactDetails td {padding-left:1em;}
}
@media only screen and (max-width: 38em) { /*608*/
	table.contactDetails {display:table;}
	table.contactDetails tbody {display:table-row-group;}
	table.contactDetails tr {display:table-row;}
	table.contactDetails td, table.contactDetails th {display:table-cell;}
	#contact, #contact-details {width:98%; float:none;padding-left:1%; box-sizing:border-box;-moz-box-sizing:border-box;}
	#contact {padding-top:2em}
	table.contactDetails td {padding-left:0;}
}
@media only screen and (max-width: 24em) { /*384px*/
	#contact, #contact-details {float:none;}
	table.contactDetails, table.contactDetails tbody, table.contactDetails tr, table.contactDetails td, table.contactDetails th {display:block}
	table.contactDetails td {padding-left:1em;}
}