/* CSS Document for Screens */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

body {font-family: 'Open Sans', sans-serif; font-size:14px; font-weight:300; color: #555; margin:0; padding:0; background-color: #000000;}
#page { max-width: 1200px; margin: 0 auto; position:relative; background-color: #fff;}

/* text */

h1 { margin: 0 0 1em 0; font-size: 2.8em; font-weight:700;}
h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight:700; line-height: 1.1em;}
h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight:700;}
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight:700;}

p { margin: 0 0 1em 0;}

a { color: #007eff;}
a:visited { color: #65b1ff;}

a.btn { font-size:1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; transition: background-color .4s; }
a.btn:hover { background-color: rgba(0,0,0,.3); }


/* header */

header { height: 255px; background: #cf0004 url(../images/banner_1200.jpg) no-repeat center bottom; position:relative;}

header a.logo { 
				z-index: 1;
				position: absolute; 
				display: block; 
				width: 497px; height: 57px;
				background: url(../images/logo.png) no-repeat 0 0; background-size: contain;
				top: 19px; left: 20px;
				}

header  a.logo span { display: none; }

header div.hero { z-index: 1; position: absolute; width: 45%; top: 70px; left: 3%;}
header div.hero h3 { line-height: 1em; margin: 0 0 30px 0; color: #fff;}


/* section-all */

section { padding: 0 30px;}
section::after { content:''; display: block; clear: both;}


/* section-main */

section.main { margin-top: 20px; margin-bottom: 30px; padding: 0;}
section.main aside { width: 33%; float: left; text-align:center;}

section.main .content { margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px;}

section.main aside h3 a { color: #000; text-decoration: none;}
section.main aside h3 a:hover { text-decoration: underline;}

section.main aside .content.overview { background-image: url(../images/icons/cars.svg);}
section.main aside .content.finding { background-image: url(../images/icons/pin.svg);}
section.main aside .content.times { background-image: url(../images/icons/01-clock.svg);}


/* section-about */

section.about { background-color: #b11322; padding-top: 30px; padding-bottom: 30px; color: #fff;}
section.about article { padding: 0 20px 0 515px; background: url(../images/front_shop.jpg) no-repeat 0 5px; min-height: 220px;}

/* section-featured */


section.featured h2 { color: #000; padding-top: 10px; font-size: 1.3em;}
section.featured { background-color: #FCDCDD; position: relative; padding: 5px;}
section.featured aside { width: 24%; float:left; margin-right: 10px;}

section.featured aside .content { text-align: center; padding-bottom: 10px;
									background-color:#f8f8f8;
									
									-moz-border-radius: 4px;
									-webkit-border-radius: 4px;
									border-bottom:1px solid #eee;
									border-radius: 4px;
									}
									
section.featured aside .content img {
	display: block;
	margin-bottom: 15px;
	width: 90%;
	padding-left: 15px;
}

section.featured aside .content h4 { margin-bottom: 0;}
section.featured aside .content p { margin-bottom: .5em;}
section.featured aside .content a { display: inline-block; color: #cc6633; font-weight: 700;}

section.featured aside .content:hover {
										background-color: #E8FF69;
										-webkit-transition: all 0.2s linear;
   									 	-moz-transition: all 0.2s linear;
    									-o-transition: all 0.2s linear;
    									-ms-transition: all 0.2s linear;
    									transition: all 0.2s linear;
										box-shadow: 0px 0px 5px #ccc;
										}

/* section-cars */

section.ProductCars {
	background-color: #fff;
	position: static;
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 5px;
	width: 95%;
	height: 100%;
	margin-bottom: 5px;
}
section.ProductCars aside .cars {
	float: left;
*margin-left:1.895%; width: 23%;
	padding-bottom: 15px;
	height: 360px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 15px;
}
section.ProductCars aside .cars .content {
	text-align: center;
	padding-bottom: 10px;
	background-color: #f8f8f8;
	
	height: 360px;
	border-bottom: 1px solid #BDBCBC;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-bottom: 15px;
	margin-left: 0px;
	margin-top: 0px;
	}
											
section.ProductCars aside .content img { display: block; margin-bottom: 3px; width:100%; padding: 0;}
section.ProductCars aside .cars .content h4 {
	width: 100%;
	height: auto;
	color: #fff;
	background-color: #b11322;
	padding-top: 0px;
	font-size: 1.1em;
	margin-top: 2px;
	margin-bottom: 2px;
	text-align: center;
											}
section.ProductCars aside .cars .content p {
	font-size: 1em;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 2px;
	text-align: left;
	line-height: 20px;
}											
section.ProductCars aside .cars .content .price {
	font-size: 1.1em;
	color: #b11322;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0px;
	font-weight: bold;
}
section.ProductCars aside .cars .content a.btn { font-size:.8em; 
												text-decoration: none; 
												color: #b11322; 
												border: 1px solid #b11322; 
												padding: 4px 15px; 
												transition: background-color .4s; 
												}
												
a.btn:hover { background-color: rgba(0,0,0,.3); }

/* Section - Paging */

section.paging {
	padding-top: 5px;
	float: none;
}
section.paging aside {
	width: 95%;
	float: none;
	padding-top: 10px;
}
section.paging .productPaging { text-align: center;}


/* section - Holder. */

section.holder { 
				width: 900px; 
				height: auto;
				margin-left: auto; 
				margin-right: auto; 
				margin-top: 21px; 
				margin-bottom: 21px;
				}
/* navbar */

section.holder aside .content.bar { height: 30px; background-color: #b11322; padding: 20px;}
section.holder aside .content.bar a { margin-left: 30px;}

/* content-left-right-heading */

#content info { height:auto; clear: both; overflow: auto;}
#pageheading { height: auto; padding: 11px;}
#pageheading h1 { margin: 0px; color: #000; font-size: 1.6em; font-weight: lighter;}
#contentleft { width: 280px; float: left; padding-top: 11px; padding-left: 11px;}
#contentleft h2 { margin: 0px; color: #6A6969; font-size: 1.4em; font-weight: lighter;}
#contentleft h6 { margin: 0px; color: #6A6969; font-size: 1em; font-weight: lighter;}
#contentright { width: 600px; float: right;}

.links { width:100%; margin: 0 0 10px 0;}
.links a:link { color: #A20003; display: block; padding-top: 5px;}
.links a:link:hover { color: #E18082;}
.links a:visited { color: #5F0001;}


/* form */
.StyleTxtField {
	border: 1px solid #666;
	border-radius: 6px;
	width: 220px;
	height: 30px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	padding-left: 6px;}
	
.white form {
	width: 95%;
	float: left;
	background-color: #b11322;
	padding: 15px 15px 20px 15px;
	color: #fff;
	border-radius: 10px;
	}	
	
	
.myForm {
	width: 80%;
	float: left;
	margin: 0 0 20px 0;
	}
	
	
.form_item {
	margin-bottom: 5px;
	float: left;
	width: 100%;
	}

.form_col {
	float: left;
	width: 100%;
	clear: both;
	}
.form_col1 {
	float: left;
	width: 49%;
	margin-right: 2%;
	clear: both;
	}

.form_col2 {
	float: left;
	width: 49%;
	margin: 0;
	}

input[type=text], textarea, input[type=password], input[type=email] {
	width: 95%; height: 25px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 6px 0;
	padding: 3px;
	}
	
input[type=email] {
	width: 95%; height: 25px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 6px 0;
	padding: 3px;
	}
	
	
	
.myForm .btn { 
		width: 150px; 
		margin: 0 0 0 2em; 
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		color: #555;
		font-weight: bold;
		}
.myForm .btn:hover { color: #212121;}
	
input[type=text]:focus, textarea:focus, input[type=password]:focus { outline: 0; border-color: #ab4a4a;}
input[type=text]:hover, textarea:hover, input[type=password]:hover { outline: 0; border-color: #ab4a4a;}
	
textarea{
	height: 100px;
	resize: none;
	}
	
input[type=file] { height: 25px; width: 95%}	
.input_images, .input_images2 { margin-bottom: 5px; width: 49%;}
.input_images { float: left;
				width: 49%;
				margin-right: 2%;
				clear: both;}
				
.input_images2 { float: left;
				width: 49%;
				margin: 0;}


form h1 { margin: 1em 0 1.5em 0.6em; font-size: 1.6em; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; font-weight: bold;}

/* product */

.product_image { float: left; padding: 5px; width: 113px; height:60px;}
#product_info { width: 78%; float:right;}
#product { width:100%; float: left;}
.productText { border-bottom: 1px solid #b11322; padding: 5px;}
.itemText { width: 70px; float: left; color: #B11322;}
.infoText { width: 100%; color: #000; }

.paging { width: 100%; float:left;}

/* navigation */

nav {
	background-color: rgba(0,0,0,.65);
	position: absolute;
	top: 18px; left: 0px;
	padding: 11px 0 0 0;
	width: 100%;
	}
	
nav::after { content:''; display: block; clear: both;}	
	
	
nav ul { list-style: none; margin: 0; padding: 0px;}

nav ul li:hover { background-color: #2b0306;}

nav ul li a {
	display:inline-block;
	color: #fff;
	padding: 10px 14px;
	text-decoration: none;
	width: 100px;
	position: relative;}
	
nav ul li a:visited { color: #fff;}
nav ul li a:hover { background-color: #6d0911;}

/* top-level */

nav > ul { padding-left: 630px;}
nav > ul > li { float: left;}



/* footer */ 

footer { font-size: .8em; margin-top: 5px; color: #999; padding: 10px; background-color: #b11322;}
footer .content { display: inline;}
footer a { margin-left: 30px; color: #777;}
footer a:visited { color: #777;}
footer a:hover { color: #fff;}

/* section - Product Details */

#page .ProductDetails {
	height:auto; clear: both; 
	width: 1020px; 
	margin-top: 20px; margin-bottom: 15px; 
	margin-left: 30px; margin-right: 10px; padding: 0;
	}
.ProductDetails h2 {
	color: #000000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 2em;
	text-align: left;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom: 1.5px solid #B11322;
	border-top-width: 1px;
}

.ProductDetails .content { height:335px; width: 100%; float: none; }
.ProductDetails .contentLeft { float: left; width: 38%; height:334px;}
.ProductDetails .contentRight {
	width: 60%;
	float: right;
	height: 334px;
	padding-left: 10px;
}
.content .contentRight h3 {
	width: 100%;
	height: 30px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1.3em;
	text-align: left;
	padding-top: 5px;
	padding-left: 5px;
	background-color: #B11322;
	color: #FFFFFF;
}

section.mainDetails {
	margin-top: 20px;
	margin-bottom: 15px;
	padding: 0;
	
	}
	
	

section.mainDetails aside .Content.text {
	float: left;
	width: 13%;
	color: #B11322;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 9px;
}
section.mainDetails aside .Content.details {
	margin-left: 5px;
	float: left;
	width: 36%;
	color: #2A2A2A;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 9px;
}
.mainDetails aside .descrip {
	clear: both;
}
aside .descrip h4 {
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 5px;
	color: #000000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: 1.3em;
}
aside .descrip p {
	color: #2A2A2A;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1em;
	text-align: left;
}
.mainDetails aside .image_thumbnail { margin-top: 10px; margin-bottom:0px; padding: 0;}
aside .image_thumbnail .thumbnail { width: 20%; text-align:center; float: left; margin-left: 15px;}

section.mainDetails aside .image_thumbnail:after  { content:''; display: block; clear: both;}
#page .button {
	width: 100%;
	height: 40px;
}
#page .button aside {
	width: 10%;
	height: 25px;
	margin-left: 85%;
	margin-top: 10px;
}
.button aside .btn {
	font-size: 0.9em;
	text-decoration: none;
	color: #B11322;
	border: 1.2px solid #B11322;
	padding: 4px 15px;
	transition: background-color .4s;
	margin-right: 6px;
	margin-left: 6px;
	
}

.button aside .btn:hover {background-color: rgba(0,0,0,.3);}

.img_thumbnail { width: 100%; height: 100%;}

/* Section - Contact Details */

.contacDetails {
	width: 1090px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	float: none;
}
.contactDetails aside .contactLeft {
	width: 44%;
	padding: 20px;
	float: left;
	height: 150px;
}

aside .contactLeft #head1 {
	color: #B11322;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	padding-bottom: 0px;
	margin-bottom: 1px;
}
aside .contactLeft #head2 {
	color: #222222;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


aside .contactLeft h1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.6em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
	border-bottom: 1.2px solid #B11322;
	border-top: 1.2px;
	color: #B11322;
}

.contactDetails aside .contactRight {
	float: right;
	width: 44%;
	padding: 20px;
	height: 150px;
}

aside .contactRight h1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.6em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
	border-bottom: 1.2px solid #B11322;
	border-top: 1.2px;
	color: #B11322;
}

/* Map */

.contactDetails aside .map {
	width: 100%;
	height: 350px;
	padding-top: 20px;
	clear: both;
	
	
}

aside .map .postcode {
	width: 18%;
	height: auto;
	float: right;
}

aside .map .mainmap {
	width: 80%;
	height: 0;
	float: left;
}

.mainmap .mapwrapper iframe {
	width: 100%;
}
 
/* Search */

#search { width: 90%; 
			background: #AFC8DE; 
			margin: 5px 0 auto 0 auto; 
			padding: 5px 0 5px 0;
			border: solid 3px #F1F1F1;}
			
#search form {
	width: 100%;
	margin: 0 auto 0 auto;
}
#search label { margin:0.3em 0 0.3em 1em;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		font-size:1em;
		color: #630608;}

#search input { width: 150px; margin: 0 0 0 1em;}

#search fieldset { border: none; background: #f1f1f1; padding: 10px 0 10px 0;}
.btn { width: 125px; margin: 0 0 0 1em;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555555; font-weight: bold;}
#search #form1 #submit {
	width: 100px;
}
.notfound {
	text-align: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #AB0002;
	font-size: 3em;
}


/* Resuilt page */
.resultwarp a { color: #F9F001;}

.resultwarp {
	margin: 5px;
	width: 95%;
	background-color: #B11322;
	clear: both;
	height: 570px;
}
.resultwarp .reimage {
	width: 100%;
	height: 260px;
	float: left;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.resultwarp .bottons {
	width: 100%;
	height: 30px;
	clear: both;
	color: #F9F001;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	padding-top: 6px;
}

.resultwarp h2 {
	color: #FFFFFF;
	margin-top: 15px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.resultwarp .title {
	width: 110px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	margin-left: 8px;
	height: 30px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	float: left;
	display: block;
}
.resultwarp .infotitle {
	width: 400px;
	padding: 5px;
	float: right;
	margin-right: 23px;
	margin-top: 8px;
	color: #000000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	background-color: #FFFFFF;
	border-radius: 2px;
	display: block;
	margin-bottom: 17px;
	height: 16px;
}
.resultwarp .boxleft {
	float: left;
	color: #FFFFFF;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1em;
	margin-left: 8px;
	padding-left: 5px;
	padding-bottom: 5px;
	padding-top: 5px;
	height: 60px;
	text-align: left;
	width: 46%;
	margin-bottom: 5px;
}
.resultwarp .boxright {
	padding: 5px;
	float: left;
	margin-right: 5px;
	width: 46%;
	height: 60px;
	color: #FFFFFF;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 5px;
	margin-left: 12px;
}
.resultwarp .boxleftinfo {
	height: 18px;
	float: left;
	margin-top: 0px;
	padding: 5px;
	background-color: #FFFFFF;
	color: #000000;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	text-align: left;
	width: 95%;
	font-weight: normal;
}


/* Media Queries */

@media screen and (max-width: 1024px){
	
	h1 { font-size: 2.4em;}

	
	/* Header */
	header div.hero { left: 3%;}


	header div.hero h1 { margin-bottom: 20px;}
	header h3 { font-size: 1.1em;}
	
	/* navigation */
	nav {
			background-color: rgba(0,0,0,.65);
			position: absolute;
			top: 12px; left: 0px;
			padding: 60px 0 0 0;
			width: 100%;
			}
			
	nav > ul { padding-left:500px;}
	nav ul li a { padding: 5px 8px;}
	
	/* section-about */
	section.about article  { padding-left: 390px; background-size: 378px auto;}
	section.about article p { font-size: 1em;}
	section.about article h2 { font-size: 1.3em;}
	
	/* section-featured */
	section.featured aside { width: 24%; float:left; margin-right: 8px;}
	
	/* section-cars */
	section.ProductCars aside .cars {
	padding-bottom: 20px;
	height: 340px;
	}

	section.ProductCars aside .cars .content {
	height: 340px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-top: 0px;
	}
	
	/* section - Product Details */

	#page .ProductDetails { width: 1000px; margin-top: 17px; margin-bottom: 13px; 
	margin-left: 15px; margin-right: 10px;}
	
	.ProductDetails h2 {font-size: 1.9em; text-decoration: none;}

	.ProductDetails .content { height: auto; width: 100%;}
	.ProductDetails .contentLeft { width: 34%; height: auto;}
	.ProductDetails .contentRight {width: 63%; height: auto;}
	.content .contentRight h3 {height: 24px; font-size: 1.2em; margin-right: 5px;}
	section.mainDetails {margin-top: 15px; margin-bottom: 10px; padding: 0;}

	section.mainDetails aside .Content.text {
	width: 12%;
	font-size: .9em;
	line-height: 7px;
	}
	section.mainDetails aside .Content.details {
	width: 34%;
	font-weight: 300;
	font-size: .9em;
	line-height: 7px;
	}

	aside .descrip h4 {font-weight: 500;font-size: 1.2em;}
	aside .descrip p {font-size: .9em;}

	.mainDetails aside .image_thumbnail { margin-top: 5px;}
	aside .image_thumbnail .thumbnail { width: 18%; margin-left: 10px;}
	
	/* Section - Contact Details */

.contactDetails {
	width: 920px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.contactDetails aside .contactLeft {
	width: 42%;
	padding: 10px;
	float: left;
	height: auto;
}


aside .contactLeft h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

.contactDetails aside .contactRight {
	float: right;
	width: 45%;
	padding: 10px;
	height: auto;
}

aside .contactRight h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}


/* Map */

.contactDetails aside .map {
	width: 100%;
	height: 350px;
	padding-top: 20px;
	clear: both;
	
	
}

aside .map .postcode {
	width: 18%;
	height: auto;
	float: right;
}

aside .map .mainmap {
	width: 80%;
	height: 0;
	float: left;
}

.mainmap .mapwrapper iframe {
	width: 100%;
}


/* Search */

#search { width: 90%; }
			
#search form { width: 100%; }
#search label { margin:0.3em 0 0.3em 1em;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		font-size:1em;
		color: #630608;}

#search input { width: 150px; margin: 0 0 0 1em;}

#search fieldset { border: none; background: #f1f1f1; padding: 10px 0 10px 0;}
.btn { width: 125px; }
#search #form1 #submit { width: 100px;}
.notfound {font-size: 3em;}


/* Resuilt page */
.resultwarp a { color: #F9F001;}

.resultwarp { width: 95%; height: 570px;}
.resultwarp .reimage { width: 100%; height: 260px; float: left;}
.resultwarp .bottons { width: 100%; height: 30px; font-size: 1.2em;}

.resultwarp h2 {
	color: #FFFFFF;
	margin-top: 15px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.resultwarp .title {
	width: 110px;
	font-size: 1em;
	height: 30px;
}
.resultwarp .infotitle {
	width: 400px;
	font-size: 1em;
	height: 16px;
}
.resultwarp .boxleft {
	font-size: 1em;
	height: 60px;
	width: 46%;
}
.resultwarp .boxright {
	width: 46%;
	height: 60px;
	font-size: 1em;
}
.resultwarp .boxleftinfo {
	height: 18px;
	font-size: 1em;
	width: 95%;
}


}


@media screen and (max-width: 825px){
	
	h1 { font-size: 2em;}
	
	/* Header */
	header { height: 215px; background-image: url(../images/banner_825.jpg);}
	header div.hero { top: 70px; left: 4%;}
	header h3 { font-size: 1em;}
	
	/* navigation */
	nav {
			background-color: rgba(0,0,0,.65);
			position: absolute;
			top: 12px; left: 0px;
			padding: 60px 0 0 0;
			width: 100%;
			}
			
	nav > ul { padding-left: 410px;}
	nav ul li a { padding: 5px 5px;}
	
	/* section-about */
	section.about { padding-top: 15px; padding-bottom: 15px; color: #fff;}
	section.about article  { padding: 0 5px 0 320px; background-size: 307px auto;}
	
	/* section-featured */
	section.featured aside { width: 24%; float:left; margin-right: 7px;}
	
	section.featured aside .content { text-align: center; padding-bottom: 10px;}
									
	section.featured aside .content img {margin-bottom: 10px; width: 95%; padding-left: 5px; padding-top: 5px;}
	
	
	/* section - Holder. */

	section.holder { width:700px; }
	
	/* navbar */

	section.holder aside .content.bar { padding: 10px;}
	section.holder aside .content.bar a { margin-left: 20px;}

	/* content-left-right-heading */

	#pageheading {padding: 6px;}
	#pageheading h1 { font-size: 1.4em;}
	#contentleft { width: 250px; padding-top: 9px; padding-left: 9px;}
	#contentleft h2 { font-size: 1.2em; font-weight: lighter;}
	#contentleft h6 { font-size: 1em;}
	#contentright { width: 400px;}		
	
	/* form */
	.myForm { width: 90%; }
	.form_col1, .form_col2 { width: 100%; margin-right: 0;}
	
	input[type=file] {width: 100%}	
	.input_images, .input_images2 { margin-bottom: 5px; width: 95%;}
	
	/* product */

#product_info { width: 100%; float: none; margin: 0; position: relative;}
#product { width:100%; float: left;}
.productText { border-bottom: 1px solid #b11322; padding: 5px;}
.itemText { font-size:12px;}
.infoText { font-size:12px;}

.paging { width: 90%; font-size:12px;}


/* section-cars */

	section.ProductCars aside .cars {
	width: 22%;
	padding-bottom: 25px;
	height: 280px;
	}

	section.ProductCars aside .cars .content {
	height: 280px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-top: 0px;
	}

	section.ProductCars aside .cars .content h4 {
	padding-top: 0px;
	font-size: .9em;
	}

	section.ProductCars aside .cars .content p {
	font-size: .8em;
	line-height: 18px;
	}							

	section.ProductCars aside .cars .content .price { font-size: 1.2em; padding-left: 40px;}
	

	/* section - Product Details */

	#page .ProductDetails { width: 730px; }
	
	.ProductDetails h2 {font-size: 1.9em;}

	.ProductDetails .content { height: auto; width: 99%;}
	.ProductDetails .contentLeft { width: 34%; height: auto;}
	.ProductDetails .contentRight {width: 64%; height: auto;}
	.content .contentRight h3 {height: 22px; font-size: 1.1em;}
	section.mainDetails {margin-top: 8px; margin-bottom: 8px; padding: 0;}

	section.mainDetails aside .Content.text {width: 15%;font-size: .9em;line-height: 6px;}
	section.mainDetails aside .Content.details {width: 33%;font-weight: 300;font-size: .9em; line-height: 6px; }

	aside .descrip h4 {font-weight: 500;font-size: 1.2em;}
	aside .descrip p {font-size: .9em;}

	.mainDetails aside .image_thumbnail { margin-top: 5px;}
	aside .image_thumbnail .thumbnail { width: 18%; margin-left: 10px;}

	#page .button {
	width: 100%;
	height: 40px;
}
#page .button aside {
	width: 15%;
	height: 25px;
	margin-left: 78%;
	margin-top: 10px;
}

/* Section - Contact Details */

.contactDetails {
	width: 680px;
	margin-top: 10px;
	margin-right: 7px;
	margin-bottom: 10px;
	margin-left: 7px;
}
.contactDetails aside .contactLeft {
	width: 45%;
	padding: 7px;
	float: left;
	height: auto;
}


aside .contactLeft h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

.contactDetails aside .contactRight {
	float: right;
	width: 47%;
	padding: 10px;
	height: auto;
}

aside .contactRight h1 {
	font-size: 1.4em;
	width: 98%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

/* Search */

#search { width: 90%; }
			
#search form { width: 100%; }
#search label { margin:0.3em 0 0.3em 1em;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		font-size:1em;
		color: #630608;}

#search input { width: 150px; margin: 0 0 0 1em;}

#search fieldset { border: none; background: #f1f1f1; padding: 10px 0 10px 0;}
.btn { width: 125px; }
#search #form1 #submit { width: 100px;}
.notfound {font-size: 3em;}


/* Resuilt page */
.resultwarp a { color: #F9F001;}

.resultwarp { width: 95%; height: 770px;}
.resultwarp .reimage { width: 100%; height: 260px; float: left;}
.resultwarp .bottons { width: 100%; height: 30px; font-size: 1.2em;}

.resultwarp h2 {
	color: #FFFFFF;
	margin-top: 15px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.resultwarp .title {
	width: 110px;
	font-size: 1em;
	height: 30px;
}
.resultwarp .infotitle {
	width: 400px;
	font-size: 1em;
	height: 16px;
}
.resultwarp .boxleft {
	font-size: 1em;
	height: 60px;
	width: 46%;
}
.resultwarp .boxright {
	width: 46%;
	height: 60px;
	font-size: 1em;
}
.resultwarp .boxleftinfo {
	height: 18px;
	font-size: 1em;
	width: 95%;
}


}


@media screen and (max-width: 760px){

	h1 { font-size: 1.8em;}
	h2 { font-size: 1.2em;}
	h3 { font-size: 1em;}
	a.btn { font-size: 1em;}
	
	/* header */
	header a.logo { width: 397px; height: 47px;}
	header div.hero { top: 60px; left: 4%;}
	header h3 { font-size: 0.9em;}
	
	/* section - main */
	section.main { margin-top: 10px; margin-bottom: 10px;}
	section.main aside div.content { background-size: 55px 55px; padding-top: 60px;}
	
	/* section - featured */
	section.featured aside div.content img { width: 85%;}
	
	/* navigation */
	nav { padding-top: 80px;}
	nav > ul { padding-left: 20px;}
	
	/* section - Holder. */

	section.holder { width: 600px; }
	
	/* navbar */

	section.holder aside .content.bar { padding: 15px;}
	section.holder aside .content.bar a { margin-left: 15px;}

	/* content-left-right-heading */

	#pageheading {padding: 3px;}
	#pageheading h1 { font-size: 1.2em;}
	#contentleft { width: 150px; padding-top: 5px; padding-left: 5px;}
	#contentleft h2 { font-size: 1.2em; font-weight: lighter;}
	#contentleft h6 { font-size: 1em;}
	#contentright { width: 380px;}
	
	/* product */

.product_image { float: left; padding: 5px; width: 113px; height:60px;}
#product_info {
	width: 100%;
	float: none;
	margin: 0;
	position: relative;
}
#product { width:100%; float: left;}
.productText { float: none; font-size:12px;}

	/* section-cars */
	section.ProductCars aside .cars {
	width: 22%;
	padding-bottom: 20px;
	height: 270px;
	}

	section.ProductCars aside .cars .content {
	height: 270px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-top: 0px;
	}

	section.ProductCars aside .cars .content h4 {
	padding-top: 1px;
	padding-left: 2px;
	padding-right: 2px;
	font-size: .8em;
	}

	section.ProductCars aside .cars .content p {
	font-size: .8em;
	line-height: 18px;
	}							

	section.ProductCars aside .cars .content .price { font-size: 1.1em;}
	
	/* section - Product Details */

	#page .ProductDetails { width: 740px; }
	
	.ProductDetails h2 {font-size: 1.5em;}

	.ProductDetails .content { height: auto; width: 99%;}
	.ProductDetails .contentLeft { width: 34%; height: auto;}
	.ProductDetails .contentRight {width: 63%; height: auto;}
	.content .contentRight h3 {height: 22px; font-size: 1.1em;}
	section.mainDetails {margin-top: 8px; margin-bottom: 8px; padding: 0;}

	section.mainDetails aside .Content.text {width: 15%;font-size: .9em;line-height: 6px;}
	section.mainDetails aside .Content.details {width: 33%;font-weight: 300;font-size: .9em; line-height: 6px; }

	aside .descrip h4 {font-weight: 500;font-size: 1.2em;}
	aside .descrip p {font-size: .9em;}

	.mainDetails aside .image_thumbnail { margin-top: 5px;}
	aside .image_thumbnail .thumbnail { width: 18%; margin-left: 10px;}

	#page .button {
	width: 100%;
	height: 40px;
	}
	#page .button aside {
	width: 15%;
	height: 25px;
	margin-left: 78%;
	margin-top: 10px;
	}
	
	/* Section - Contact Details */

.contactDetails {
	width: 640px;
	margin-top: 10px;
	margin-right: 7px;
	margin-bottom: 10px;
	margin-left: 7px;
}
.contactDetails aside .contactLeft {
	width: 43%;
	padding: 5px;
	float: left;
	height: auto;
}


aside .contactLeft h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

.contactDetails aside .contactRight {
	float: right;
	width: 45%;
	padding: 10px;
	height: auto;
}

aside .contactRight h1 {
	font-size: 1.4em;
	width: 98%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}


/* Search */

#search { width: 95%; }
			
#search form { width: 100%; }
#search label { margin:0.3em 0 0.3em 1em;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		font-size:1em;
		color: #630608;}

#search input { width: 95px; margin: 0 0 0 0.8em;}

#search fieldset { border: none; background: #f1f1f1; padding: 5px 0 5px 0;}
.btn { width: 90px; }
#search #form1 #submit { width: 100%;}
.notfound {font-size: 3em;}


/* Resuilt page */
.resultwarp a { color: #F9F001;}

.resultwarp { width: 95%; height: 770px;}
.resultwarp .reimage { width: 100%; height: 260px; float: left;}
.resultwarp .bottons { width: 100%; height: 30px; font-size: 1.2em;}

.resultwarp h2 {
	color: #FFFFFF;
	margin-top: 15px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.resultwarp .title {
	width: 110px;
	font-size: 1em;
	height: 30px;
}
.resultwarp .infotitle {
	margin-left: 5px;
	width: 90%;
	font-size: 1em;
	height: 16px;
}
.resultwarp .boxleft {
	font-size: 1em;
	height: 60px;
	width: 46%;
}
.resultwarp .boxright {
	width: 46%;
	height: 60px;
	font-size: 1em;
}
.resultwarp .boxleftinfo {
	height: 18px;
	font-size: 1em;
	width: 95%;
}



}

@media screen and (max-width: 625px){
	h1 { font-size: 1em;}
	h3 {margin-bottom: 0px;}
	a.btn { font-size: .9em;}
	
	/* header */
	header { height: 165px; background-image: url(../images/banner_625.jpg); background-position: left top;}
	header a.logo {
		width: 100%; height: 66px;
		left: 0px; top: 0px;
		background-color: rgba(0,0,0,.65);
		background-size: 297px 37px;
		background-position: 20px center;}
	
	header div.hero { width: 300px; top: 47px; left: 25px;}
	header div.hero h3 { margin-bottom: 10px; font-size: .8em;}
	

	/* section - main */
	section.main aside { width: 100%; float: none; text-align:left;}
	section.main aside div.content {
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 85px;
		background-size: 50px 50px;
		background-position: 20px 5px;
		}
		
	/* section - about */
	section.about article { padding: 160px 20px 0px 0px; background-size: 300px auto; min-height: initial;}
	
	/* section - feature */
	section.featured aside { width: 100%; float: none; margin: 0; position: relative;}
	section.featured aside div.content { padding: 25px 20px 20px 150px;}
	section.featured aside div.content p { font-size: .9em;}
	section.featured aside div.content img {
		display: inline-block;
		width: 115px;
		position: absolute;
		top: 19px; left: 0px;}
	
	
	/* navigation */
	nav { position: static; width: auto; padding: 20px 15px; background-color: #4b0a0c;}
	
	nav ul,
	nav ul ul,
	nav ul ul ul { display: block; position: static;}
	
	nav > ul { padding: 0px;}
	nav > ul > li { float: none; margin-top: 10px;}
	nav ul li:hover { background: none;}
	nav ul li a {
		width: auto;
		display: block;
		margin: 8px 10px;
		padding: 8px 15px;
		border: 1px solid rgba(255,255,255,.25);
	}
	
	nav ul li a:hover { background-color: rgba(255,255,255,.2);}
	
	/* footer */
	footer div.content { display: block; margin-top: 15px;}
	footer div.content a { margin: 0 20px 0 0;}
	
	/* section - Holder. */

	section.holder { width:500px; }
	
	/* navbar */

	section.holder aside .content.bar { padding: 10px;}
	section.holder aside .content.bar a { margin-left: 10px;}

	/* content-left-right-heading */

	#pageheading {padding: 1px;}
	#pageheading h1 { font-size: 1.5em;}
	#contentleft, contentright { width: 100%; padding-top: 5px; padding-left: 5px;}
	#contentleft h2 { font-size: 1.1em;}
	#contentright { float: left;}
	
	#contentlinks { width: 100%;}
	.links { width:100%; margin: 0 0 10px 0;}
	.links a:link { display: inline-block; padding: 2px;}
	
		
	/* form */
	.myForm { width: 100%; float: left;}
	.form_col1, .form_col2 { width: 100%; margin-right: 0;}
	form h1 { margin: 0.7em 0 1em 0.6em; font-size: 1.4em;}
	.myForm .btn { margin: 2px;}

	/* section-cars */
	section.ProductCars aside .cars {
	width: 22%;
	padding-bottom: 20px;
	height: 266px;
	}

	section.ProductCars aside .cars .content {
	height: 266px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-top: 0px;
	}

	section.ProductCars aside .cars .content h4 {
	padding-top: 1px; 
	padding-left: 2px;
	padding-right: 2px;
	font-size: .8em;
	}

	section.ProductCars aside .cars .content p {
	font-size: .8em;
	line-height: 18px;
	}							

	section.ProductCars aside .cars .content .price { font-size: 1.1em;}


	/* section - Product Details */

	#page .ProductDetails { width: 580px; }
	
	.ProductDetails h2 {font-size: 1.2em;}

	.ProductDetails .content { height: auto; width: 99%;}
	.ProductDetails .contentLeft, .contentRight {  width: 100%; padding-top: 5px; padding-left: 5px;}
	.contentLeft { display: inline-block;}
	.ProductDetails .contentRight { float: left; width: 100%;}
	

	.mainDetails aside .image_thumbnail { margin-top: 5px;}
	aside .image_thumbnail .thumbnail { width: 23%; margin-left: 2px;}

	#page .button {
	width: 100%;
	height: 30px;
	}
	#page .button aside {
	width: 20%;
	height: 25px;
	margin-left: 75%;
	margin-top: 10px;
	}
	
	.img_thumbnail {margin-left: 1%;}


	/* Section - Contact Details */

.contactDetails {
	width: 450px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
}
.contactDetails aside .contactLeft {
	width: 43%;
	padding: 5px;
	float: left;
	height: auto;
}


aside .contactLeft h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

.contactDetails aside .contactRight {
	float: right;
	width: 45%;
	padding: 5px;
	height: auto;
}

aside .contactRight h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 2px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}


/* Map */

.contactDetails aside .map {
	width: 100%;
	height: 500px;
	padding-top: 10px;
	clear: both;
	
	
}

aside .map .postcode {
	width: 95%;
	height: auto;
	float: left;
}

aside .map .mainmap {
	width: 95%;
	height: 0;
	float: left;
}

.mainmap .mapwrapper iframe {
	width: 100%;
}


}



@media screen and (max-width: 425px){

/* header */
header { height: 110px; background-image: url(../images/banner_425.jpg);}
header a.logo {
	height: 36px; background: rgba(0,0,0,.65) url(../images/logo%20small.png) no-repeat center center;
	background-size: 250px 29px;}

header div.hero { width: 100%; left: 0px; top: 35px; text-align: center;}
header div.hero h3 { font-size: .8em; margin-bottom: 10px;}

/* section -feature */

section.featured aside div.content { padding: 180px 20px 20px 0px;}
section.featured aside div.content img { width: auto; height: 140px; top: 30px; padding-left: 80px; }


/* footer */

	footer::after { content:''; display: block; clear: both;}
	footer div.content a {
	display:inline-block; margin: 0 0 10px 0;
	float: left;
	clear: both;
}

	/* section - Holder. */

	section.holder { width:320px; }
	#contentlinks {font-size:14px;}
	
	/* navbar */

	section.holder aside .content.bar { padding-top: 7px;}
	section.holder aside .content.bar a { margin-left: 2px;}

	/* content-left-right-heading */

	#pageheading h1 { font-size: 1.3em;}
	#contentleft { width: 130px; padding-top: 5px; padding-left: 3px;}
	#contentleft h2 { font-size: 1em;}
	#contentright { width: 99%;}
	
	#contentlinks { width: 100%;}
	.links a:link { display: inline-flex; padding: 2px;}
	
	/* product */

	.product_image { float: none; padding: 5px; width: 113px; height:60px;}
	#product_info { width: 100%; float: none; margin: 0; position: relative;}
	#product { width:100%; float: left;}
	.productText { float: none; font-size:12px;}
	 
	section.featured aside .content img {
	display: block;
	margin-bottom: 15px;
	width: 90%;
	padding-left: 65px;
}
	/* navbar */

	section.holder aside .content.bar { height: 90px; width: 99%; padding: 2px;}
	section.holder aside .content.bar a { width: 50%; margin-top: 5px; height:20px; display: block;}


	/* section-cars */
	section.ProductCars aside .cars {
		float: none;
		clear:both;
		padding-left: 5px;
		display: inline-block;
		width: 92%;
		padding-bottom: 30px;
		height: 390px;
	}

	section.ProductCars aside .cars .content {
	height: auto;
	margin-bottom: 8px;
	margin-left: 0px;
	margin-top: 0px;
	}

	section.ProductCars aside .cars .content h4 {
	padding-top: 1px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	font-size: 1em;
	}

	section.ProductCars aside .cars .content p {
	font-size: 1em;
	line-height: 18px;
	}							

	section.ProductCars aside .cars .content .price { font-size: 1.2em; padding-left: 110px;}
	
	
	/* section - Product Details */

	#page .ProductDetails { width: 320px; height: auto; }
	
	.ProductDetails h2 {font-size: 1em; height: auto; padding-bottom: 5px;}

	.ProductDetails .content { height: auto; width: 99%;}
	.ProductDetails .contentLeft, .contentRight {  width: 100%; padding-top: 2px; padding-left: 3px;}
	.contentLeft { display: inline-block;}
	.ProductDetails .contentRight { float: left; width: 100%;}
	
	
	.content .contentRight h3 {
	width: 100%;
	height: auto;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 5px;
	font-size: 1.2em;
	text-align: left;
	padding-top: 2px;
	padding-left: 5px;
	}
	
	section.mainDetails {
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 0;
	}
	
	

section.mainDetails aside .Content.text {
	float: left;
	width: 30%;
	color: #B11322;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 0.9em;
	line-height: 11px;
}
section.mainDetails aside .Content.details {
	float: left;
	margin-left: 5px;
	width: 60%;
	color: #2A2A2A;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 0.9em;
	line-height: 11px;
}
	
	.mainDetails aside .image_thumbnail { margin-top: 10px; margin-bottom:0px; padding: 0;}
	aside .image_thumbnail .thumbnail { width:43%; text-align:center; float: left; margin-left: 10px;}

	section.mainDetails aside .image_thumbnail:after  { content:''; display: inline-block; clear: both;}

	#page .button {
	width: 100%;
	height: 30px;
	}
	#page .button aside {
	width: 40%;
	height: 25px;
	margin-left: 55%;
	margin-top: 10px;
	}
	
	.img_thumbnail {margin-left: 3%;}

	/* Section - Contact Details */

.contactDetails {
	padding-left: 20px;
	width: 99%;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 1px;
}
.contactDetails aside .contactLeft {
	width: 90%;
	padding: 0px;
	float: left;
	height: auto;
}


aside .contactLeft h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 0px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

.contactDetails aside .contactRight {
	float: left;
	width: 90%;
	padding: 0px;
	height: auto;
}

aside .contactRight h1 {
	font-size: 1.4em;
	width: 100%;
	padding-bottom: 5px;
	height: auto;
	padding-left: 0px;
	padding-top: 5px;
	border-left: 1.2px;
	border-right: 1.2px;
}

/* Map */

.contactDetails aside .map {
	width: 100%;
	height: 500px;
	padding-top: 10px;
	clear: both;
	
	
}

aside .map .postcode {
	width: 95%;
	height: auto;
	float: none;
}

aside .map .mainmap {
	width: 95%;
	height: 0;
	float: none;
}

.mainmap .mapwrapper iframe {
	width: 98%;
}


}