#contact, #contact-details {width:100%; margin:1em auto;}
#contact .titles, #contact-details .titles {padding:10 0 0.5em;margin:0;}
#contact {float:left;}
#contact-details {float:right}
#contact textarea {width:97%;}
#contact input[type=text] {width:97%;}
#contact label {display:block; margin:2px 10px 2px; font-size:1.1em;}
#contact .submit-button {float:right;margin:18px; width:20%;}
#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;}
}