/*
——————————————————————
Global
——————————————————————
*/
html {
	min-width:320px;
}
body {
	min-width:320px;
	font-size:13px;
}
#box, #vehicle {
	padding:20px;
}
#wrapper {
	padding-top:25px;
}
h1 {
	font-size:26px;
}
h2 {
	font-size:17px;
}

/*
——————————————————————
Header
——————————————————————
*/
#header {
	height:64px;
	padding:10px 20px 20px 20px;
}
#logo {
	width:150px;
	height:87px;
	border-radius:0;
	padding:0;
	border-bottom:6px solid #7f3811;
}
#logo span {
	display:none;
}
#nav.hidden {
	display:none;
}
#hamburger {
	display:block;
	position:absolute;
	top:10px; right:25px;
	cursor:pointer;
}
#phone {
	display:block;
	color:#fff;
	position:absolute;
	top:15px; right:85px;
	font-size:20px;
}
#nav {
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	background:#000;
	margin:0;
	z-index:10;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
}
#nav li {
	display:block;
	float:none;
	margin:0;
}
#nav #close {
	display:block;
	height:47px;
	padding:5px 5px 0 0;
}
#nav #close img {
	float:right;
	width:23px;
	height:23px;
	cursor:pointer;
	padding:12px;
}
#nav li a,
#nav li:hover a,
#nav li a:hover,
#nav li.active a {
	float:none;
	display:block;
	text-align:center;
	text-decoration:none;
	font-size:18px;
	font-weight:400;
	line-height:45px;
	height:auto;
	color:#aa5323;
	background:none;
}
#nav li.active a,
#nav li.active a:hover {
	color:#fff; 
}
#nav #close img.spin {
	-webkit-animation-name:spin;
	-webkit-animation-duration:800ms;
}
@-webkit-keyframes spin {
	from	{-webkit-transform:rotate(-90deg)}
	to		{-webkit-transform:rotate(0deg)}
}


/*
——————————————————————
Home Page
——————————————————————
*/
#carousel {
	height:260px;
}
#carousel .text {
	margin-top:35px;
}

/*
——————————————————————
Vehicles
——————————————————————
*/
#results.list a {
	padding-top:13px;
}
#featuredWrapper {
	display:none;
}
#vehicle #leftcol {
	float:none;
	width:auto;
}
#vehicle #rightcol {
	float:none;
	width:auto;
	margin:30px 0 0 0;
}
#images {
	width:auto;
	height:auto;
}
#hero {
	width:auto;
	height:360px;
	position:static;
}
#hero a {
	height:360px;
}
#hero img {
	width:auto;
	height:auto;
	max-width:100%;
}
#thumbs, #thumbs ul {
	position:static;
	width:auto;
	height:auto;
}
#thumbs li {
	margin:0 4px 4px 0;
}

/*
——————————————————————
Testimonials
——————————————————————
*/
#testimonials {
	width:auto;
	margin:0;
}
#testimonials li {
	width:auto;
	height:auto;
	float:none;
	margin:0 0 12px 0;
}
#testimonials li:last-child {
	margin-bottom:0;
}

/*
——————————————————————
Footer
——————————————————————
*/
#footer {
	margin-top:15px;
	height:auto;
	padding:0 15px 15px 15px;
}
#footer .content div, #footer address {
	margin-right:25px;
}
#footer address:last-child {
	margin:0;
}


@media only screen and (max-width: 650px) {
	
	#search p {
		width:50%;
		margin-right:0;
		padding-right:12px;
		box-sizing:border-box;
	}
	#search p.right {
		padding-right:0;
	}
	#search select {
		width:100%;
	}
	img.aboutImage {
		float:none;
		max-width:100%;
		margin:0 auto 20px auto;
	}
	.financeForm {
		padding:16px;
	}
	.form p, .form .fieldWrapper {
		padding:0;
		margin-bottom:12px;
	}
	.form label {
		position:static;
		display:block;
		width:auto;
		text-align:left;
	}
	.form input.text,
	.form textarea {
		width:100%;
		box-sizing:border-box;
	}
	.form select {
		margin-right:2px;
	}
	.form h3 {
		margin-left:0;
	}
	.form ul.bullet {
		margin:0;
	}
	.form .validation-container {
		width:auto;
		margin-left:0;
	}
}

@media only screen and (max-width: 630px) {
	#carousel {
		height:auto;
		padding-bottom:20px;
		margin-bottom:20px;
	}
	#carousel h1 {
		font-size:23px;
	}
	#carousel .text {
		width:auto;
		margin-top:25px;
	}
	#rotator {
		display:none;
	}
	#breadcrumb a.edit {
		display:none;
	}
}

@media only screen and (max-width: 580px) {
	#resultsWrapper span.description {
		display:none;
	}
	#hero {
		height:auto;
		margin-bottom:12px;
	}
	#hero li {
		position:static;
		display:none;
	}
	#hero li.active {
		display:block;
	}
}

@media only screen and (max-width: 480px) {
	#logo {
		left:15px;
	}
	#box, #vehicle {
		padding:16px;
	}
	#wrapper {
		padding:15px;
	}
	.homeContent {
		padding:0 15px;
	}
	#hamburger {
		right:15px;
	}
	#phone {
		right:67px;
		font-size:18px;
	}
	#footer .content div {
		float:none;
		margin-bottom:10px;
	}
	#search {
		padding:8px 10px 0px 10px
	}
	#search select.short {
		width:auto;
		padding:3px 1px;
		margin-bottom:4px;
	}
	#search span.to {
		width:auto;
		padding:0 3px;
		margin-bottom:4px;
	}
	#search p.make {
		clear:left;
	}
	#breadcrumb a:first-child,
	#breadcrumb span:nth-child(2) {
		display:none;
	}
	#results.list {
		margin-bottom:20px;
	}
	#results.list a {
		padding:11px;
		text-align:center;
	}
	#results.list li {
		margin-bottom:11px;
		min-height:0;
	}
	#resultsWrapper img {
		display:block;
		position:static;
		margin:0 auto 10px auto;
	}
	#results.list strong {
		font-size:17px;
	}
	#mainContact dl {
		width:auto;
	}
	#mainContact dt {
		width:25%;
	}
	#mainContact dd {
		width:75%;
	}
	.recaptcha {
		transform:scale(0.77);
		transform-origin:0 0;
	}
	#thumbs {
		width:101%;
		margin-right:-1%;
	}
	#thumbs li {
		width:24%;
		height:auto;
		margin:0 1% 4px 0;
	}
	#thumbs img {
		width:100%;
		height:auto;
	}
}

@media only screen and (max-width: 390px) {
	
	#carousel h1 {
		font-size:20px;
	}
	#carousel a.trademe {
		margin-bottom:8px;
	}
	#phone {
		top:58px;
		right:16px;
	}
	#vehicle dl {
		width:auto;
	}
	#vehicle dt {
		width:40%;
		box-sizing:border-box;
	}
	#vehicle dd {
		width:60%;
		box-sizing:border-box;
	}
}

@media only screen and (max-width: 350px) {
	#carousel h1 {
		font-size:18px;
	}
}