@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	text-decoration:none;
}


body {
	font: .9em/150% Arial, Helvetica, sans-serif;
	line-height: 1.25em;
	color: #666;
	margin: 0;
	padding: 0;
	background-color:#FFFFFF;
}

p{ padding:0.6em 0; line-height:1.4em;}
p.intro{ text-transform:uppercase; font-size:0.8em; line-height:1em; color:#666666; letter-spacing:0.1em; margin:10px 0; padding:0; }

a, a:visited {outline: 0; color:#0066cc }
a:hover, a:focus {color: #000; text-decoration:underline;}

a[href^=tel]{
color:inherit;
text-decoration: underline;
}

p a, p a:visited { line-height: inherit; }
p.larger{ font-size:1.3em;}

pre{ background-color: #FFFC92; padding:5px;}

h1, h2 { font-weight:normal; color:#333;}

h1 { font-size: 2.2em; margin:0 0 15px 0; padding:0 0 15px 0; line-height:1.1em; text-align:center; border-bottom:1px solid #CCCCCC;}
h1.intro{ text-transform:uppercase; font-size:0.9em; line-height:1.3em; color:#666666; letter-spacing:0.1em; margin:10px 0; border:none; padding:0; }
h1 span { font-size:0.8em;}

h2 { font-size: 1.7em; line-height:1.2em;  display:block; margin-top:10px;  }
h2.larger {font-size: 1.9em;}
h2 span{ font-size:0.8em;}

h3 { font-size: 1.4em; line-height:1.3em; margin:15px 0 0px 0; font-weight:normal; color:#666; }
h4 {  }
h5 {  }
h6 {  }

del{ text-decoration:line-through;}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
img.border { border:1px solid #CCC; padding:0;}
.imgright{ float:right; margin-left:30px;}
.imgleft{float:left; margin-right:30px;}

.opimg {
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
.opimg:hover {
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

/*Back to top button */
#back-top {
	width:50%;
	margin:0;
	position: fixed;
	bottom: 0px;
}
#back-top a {
	width: 80px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color:#fff;
}
/* arrow icon (span tag) */
#back-top span {
	width: 50px;
	height: 50px;
	display: block;
	background: #333 url(../images/backtotop.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	margin: 5px auto;
}
#back-top a:hover span {
	background-color: #666;
}


#page{
	width:95%;
    max-width:1280px;
	margin:0 auto;
}

.container {
	width:90%;
	max-width:1280px;
	margin:0 auto;
}

#header {
	background-color:#292929;
	width: 100%;
	padding: 0;
	margin:0;
	clear: both;
}

.logo{ float:left; padding:20px 50px 20px 0; }
.logo-link{}
.logo-img{}

.contactnumbers { float:right; margin-top:15px; color:#666;  text-align:right; }
.contactnumbers p { padding:0; margin:0 0 8px 0;}
.contactnumbers p span{ font-size:1.8em; line-height:1.3em; color:#e7e7e7; margin-left:5px;}

#banner{ width:100%; max-width:1920px; margin:0 auto; clear:both; text-align:center; }
#banner h1, #banner h2, #banner h3, #banner p { color:#FFFFFF; }
#banner h1 {font-size:2.5em; text-transform:uppercase;}
#banner h2 {font-size:2em; margin:30px 0;}
#banner p{ font-size:1.1em;}
#banner .bkg{ margin:0 auto;}
.noimg{ background-image:none !important}

#content { background-color:#FFFFFF; }
section { width:100%; clear: both; padding:30px 0;}

.dark{
	background:url(../images/dark.jpg) center top no-repeat #1B1B1B;
	overflow:hidden;
	color:#B3B3B3;
	margin-top:30px;
	padding-top:0 !important;
}

.dark h1, .dark h2 { color:#fff; border:none; text-align:center;}
.dark h3{ color: #B3B3B3;}

.midgrey{ background-color: #838383;}
.lightgrey{ background-color:#dadada; padding-top:0 !important; }
.lightgrey h1{border:none;}

#footer {
	clear: both;
	width: 100%;
	margin:0;
	padding: 20px 0;
	/*background-color:#292929;*/
	text-align:center;
}

#footer img{ padding:2px;}
#footer a { color: #666; text-decoration:none;}
#footer a:hover { text-decoration:underline; }

#footer p {
	padding:4px 0;
	margin:0;
}
#footer .tel{
	font-size:1.3em;
	margin-bottom:0px;
	margin-left:10px;
	line-height: 1em;
}
#footer .address{}

#footer .credits{
	font-size:0.8em;
	display:block;
	clear:both;
	margin:10px auto;
	text-align:center;
}
#footer .credits a{color: #666;}
#footer .credits a:hover { text-decoration:underline; }

#mobileFooter{ display:none;}

.divider{
	clear:both;
	border-bottom:#ccc 1px solid;
	height:5px;
	margin:0;
}

.clear{ clear:both; position:relative;}
.clearleft{ clear:left;}
.clearright{ clear:right;}

.block {display:block;}
.left{ float:left;}
.right{	float:right;}
.last{margin:0 !important; }

.border{ border:#BCBCBC 1px solid; margin-bottom:20px; background-color:#FFFFFF;}
.borderLeft {border-left:#ccc 1px solid;}
.borderRight {border-right:ccc 1px solid;}
.borderBoth {border-right:#ccc 1px solid;border-left:#ccc 1px solid;}
.odd{}
.even{ border-top:2px solid #eeeeee; margin:50px 0;}

small{font-size:0.8em}

.half{
	width:46%;
	margin-right:2%;	
	padding:1%;

}
.third{ 
	width:29%;
	margin-right:2%;
	padding:1%;
}
.twothirds{ width:60%; margin-right:2%; padding:1%;}

.quarter{
	width:21%;
	margin-right:2%;
	padding:1%;
}

.threequarter{ 
	width:68.5%;
	margin-right:2%;
	padding:1%;

}

.products{ margin-bottom:40px;}
.products div { padding-top:10px;}

#filters{ margin:40px 0 10px 0;} /*used for isotope filtering*/
#products{} /*used for isotope filtering*/
.item { position:relative; overflow:hidden; float:left !important; border-bottom:#ccc 1px solid; clear:right; } /*used for isotope filtering*/
.item img { width:100%; height:auto;} /*used for isotope filtering*/


.three{ width:31%; padding:1%; margin-top:20px; }
.four{ width:23%; padding:1%; margin-top:20px; }

.item a {color: #333;} /*used for isotope filtering*/
.item a:hover {color: #000; text-decoration:none;} /*used for isotope filtering*/


.modelphoto{margin-left:2%; padding:1%; float:right;}
.modeltext{width:21%; margin-right:2%; padding:1%; float:right;}

ul.spaced, ol.spaced{
	padding-left: 30px;
	margin: 10px 0;
}
ul.spaced li{ padding:3px 0;}

#hero{ width:100%; padding:15px 0;}
.herobox { padding:0 !important; width:32%; margin-right:2%; float:left; background-color:#505557; }
.herobox .halfa { width:50%; float:left; min-height:165px; background-color:#171e24; }
.herobox .halfb { width:40%; float:left; padding:20px 5%; margin:0;  color:#FFFFFF; min-height:165px;}
.herobox img { }
.herobox a {
	color:#FFFFFF;
	color:#03afff;
	font-weight: normal;
	text-transform:uppercase;
	text-decoration:none;
	margin-top:20px;
	font-size:1.2em;
}
.herobox a:hover{ text-decoration:underline;}
.herobox h3 {
	font-weight: normal;
	text-transform:uppercase;
}
.herobox p {}


.modelbox p{ padding:5px 0 10px 0;}
.modelbox h3.special{ font-size:1.6em;}
.modelbox h3{ font-size:1.5em;}

#map_canvas{ 
	height:400px;
	width:100%;
	padding:0;
	margin:0;
	border:#C3C3C3 1px solid;
}

#footMap{
	width:98%;
	height:150px;
	margin: 15px 0;
}

.icon{ display:block; min-height:55px; }
p.icon{ display:block; min-height:55px; }
.icon img{ float:left; margin-right:20px;}

.moreinfo {
	position:fixed;
	top:30%;
	left:10px;
	height:55px;
	width:55px;
	z-index:10000;
}

.center{text-align:center; margin-bottom:20px;}

.service-icon{
	padding:0;
	display:block;
	float:left;
	margin-right: 20px;
	width:40px;
	height:40px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius:50%;
	background-color:#009966;
}

.service-body{ overflow:hidden;}

/************************************************************************************
contact forms
*************************************************************************************/
#contactWrapper{ margin:0 auto;}
#contactform { width: 80%; max-width:500px; margin:0 auto;}

#contactWrapper label.checked { display:none; background: none; border: 0px; margin-top: 0px; padding: 0px; text-indent: -5000px;}
#contactWrapper em {font-size:0.9em;}

#contactWrapper .input { clear:both; padding:10px; color: #1A1A1A; }
#contactWrapper .btop { border-top:#DBD8D8 1px solid; padding-top:10px;}
#contactWrapper .stageone { display:none !important;}
#contactWrapper .requiredNote { margin: 10px 0px; font-size:0.9em;}

#contactWrapper .input span {display:block; margin-bottom:4px;}

#contactWrapper .success {}
#contactWrapper .success p {}

#contactWrapper .phperr {color: #FF0000; font-weight: bold;}
#contactWrapper label { display: inline-block; margin-top:2px;}
#contactWrapper label.error {color: #990000; padding:6px 10px; font-weight: bold; border:1px solid #FF0004; background-color:#FFE0E0;}
#contactWrapper .formerror { color: #990000; display:block; }

#contactform input[type="text"], #contactform input[type="url"], #contactform input[type="email"], #contactform input[type="number"], #contactform select {
	background-color:#FFF;
	color:#000;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	padding:8px;
	border: 2px solid #afafaf;
	width: 95%;
}

#contactform textarea{
	width:95%;
	padding:8px;
	border: 2px solid #afafaf;
}

#contactform input[type="radio"], #contactform input[type="checkbox"] { margin-left:10px;}
#contactform input:focus, #contactform textarea:focus { outline: none; border: 2px solid #649d9d; }

.makeEnquiry{ margin-top:20px;}

input.submitButton {
	-webkit-appearance: none;
	display:inline-block !important;
	cursor:pointer;
	padding:0.9em 2.5em 0.8em 2.5em;
	font-size:0.9em;
	text-transform:uppercase;
	letter-spacing:0.1em;
	text-decoration:none;
	color:#666;
	cursor:pointer;
	margin:2px;
	border: 2px solid;
	width:auto !important;
	background: #009966; 
	color:#FFFFFF; 
	border-color:#009966;
}

input.submitButton:hover {background-color: #262626; color:#FFFFFF; border-color:#999;}



.brochure{
	float:left;
	text-align:center;
	margin-right:40px;
	margin-bottom:30px;
	margin-top:10px;
}
.brochure img{ margin: 0 0 10px; float: none; border: 1px solid #ccc;}

/************************************************************************************
Breadcrumbs
*************************************************************************************/
#breadcrumb{ display:block; font-size:0.9em; clear:both;}
#breadcrumb li{
	list-style-type:none;
	display:block;
	float:left;
	margin-right:10px;
}
#breadcrumb a{
	border-right:#ccc 1px solid;
	padding-right:10px;
	font-style:italic;
}
#breadcrumb a:hover{
}

/************************************************************************************
Royal Slider Annimated Block
*************************************************************************************/
.rsABlock {
	/*background:url(../images/rsABlockBG.png) repeat;*/
	top: 12% !important;
	left: 10% !important;
	width: auto !important;
	height: auto !important;
	padding: 0px;
	color: #FFFFFF;
}
.rsABlock h2 {
	font-size: 3em;
	text-transform: uppercase;
	line-height: 1.2em;
	margin:0;
	padding:0;
}
.rsABlock h3 {
	text-align:left;
	font-size:1.9em;
	line-height:1.5em;
	font-weight:bold;
}

.bannerBlock h1 {
	text-align:left; 
	font-size:3em;
	line-height:1em;
	margin:0;
	padding:0;
}
.bannerBlock h2 {
	text-align:left;
	font-size:1.9em;
	line-height:1.5em;
}

.rsABlock h1 a, .rsABlock h2 a, .bannerBlock h1 a, .bannerBlock h2 a { color:#03afff; text-transform:uppercase;text-decoration:none;}
.rsABlock h1 a:hover, .rsABlock h2 a:hover, .bannerBlock h1 a:hover, .bannerBlock h2 a:hover { text-decoration:none;}

.rsABlock p, .bannerBlock p {font-size:1.2em; line-height:1.2em; font-style:italic; padding:5px 0;}


.bannerBlock{
	float: left;
	width: 27%;
	height: auto !important;
	padding: 30px 0 3% 0;
	color: #0D0D0D;
}

h1.bannerHeading{color: #0D0D0D; margin:0; padding-top:20px; display:block;}
.bannerBlock h1, .bannerBlock h2, .bannerCar h2, .bannerCar h3 {color: #0D0D0D;}
.bannerBlock h1, .bannerBlock h2 {font-weight:bold; }
.bannerBlock ul { padding: 0 15px; margin-bottom:20px; }
.bannerBlock li { font-size:1.2em; line-height:1.1em; padding:3px; }


.bannerCar{
	float:left;
	width: 70%;
	height: auto !important;
	padding-bottom:20px;
}

.bannerCar img { }
.bannerCar h2, .bannerCar h3 { padding:0; margin:0 0 4px 0;}
.bannerCar p { padding:0; margin:8px 0 20px 0;}


/************************************************************************************
Buttons
*************************************************************************************/

button, a.button, .button, a.buttonR, .buttonR, a.buttonRR, .buttonRR { 
	outline:none;
	display:inline-block;
	padding:0.7em 2.5em;
	font-size:0.9em;
	text-transform:uppercase;
	letter-spacing:0.1em;
	text-decoration:none;
	background:none;
	color:#666;
	cursor:pointer;
	margin:2px;
	border: 2px solid;
}

#banner a.button{ border-color:#fff; color:#FFFFFF;}
#banner a.button:hover {background-color: #009966;}

button, a.button, .button { border-color:#999; }
a.buttonR, .buttonR, a.buttonRR:hover, .buttonRR:hover {background: #009966; color:#FFFFFF; border-color:#009966;}

button:hover, a.button:hover, .button:hover, a.buttonR:hover, .buttonR:hover, a.buttonRR, .buttonRR  {background-color: #262626; color:#FFFFFF; border-color:#999;}
button:active, button:hover, button.is-checked { background: #009966; color:#FFFFFF;}


a.herobutton{
	display:inline-block;
	margin-top:10px;
	padding:0.6em 1em 0.4em 1em;
	font-size:1.3em;
	color:#fff;
	text-decoration:none;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border:#FFFFFF 1px solid;
}
a.herobutton:hover {background-color:#d71920; border-color:#d71920;}

/************************************************************************************
SUBMENU TABS
*************************************************************************************/

#tabs{ margin-top:20px; }

ul.subMenu { width:15%;float:left; }
ul.subMenu li{
	list-style-type:none;
	padding:0;
	margin:0;
	border-bottom:#c8c8c8 1px solid;
}

ul.subMenu li a{
	font-size:1.1em;
	display:block;
	text-decoration: none;
	padding:10px;
	color:#444;
	
}
ul.subMenu li a:hover {background: #e6e6e6 url(../images/navirightdark.png) right center no-repeat;}
ul.subMenu li a.active {background: #535353 url(../images/naviright.png) right center no-repeat; color:#FFFFFF;}

#tabs-panel{
	width:80%;
	padding-left:5%;
	min-height:300px;
	float:left;
}
#tabs-panel div {
	padding:0px;
}

/************************************************************************************
end TABS
*************************************************************************************/

.features{ padding:20px 0;}
.features li{
	list-style-type:none;
	width:50%;
	float:left;
}

.series{ width:40%; padding:3%; float:left;}


/*colour tabs*/
#coloursThumb {
	width: 35%;
	float: left;
	position:relative;
	margin-top:50px;
}

#coloursThumb ul { width: 100%; }
#coloursThumb li {list-style-type:none; margin-bottom:4px;  }
#coloursThumb li img { margin-right:5px; border:#C4C4C4 1px solid; float:left; }
#coloursThumb li a { color:#000000; cursor:pointer; text-decoration:none;display:block;line-height:35px; height:35px;  }
#coloursThumb li a:hover { color: #990000; }

#coloursLarge {
	position:relative;
	width: 65%;
	float: left;
	text-align:center;
}
#coloursLarge img { display:block;}

#image-switch #two, #image-switch #three { display:none; }

.carGallery{
	width:100%;
	font-size:1.3em;
	text-transform:uppercase;
}


.toggleswitch{
	 display:block;
	 height: 45px;
	 background: url(../images/navigatedown.png) right no-repeat #3987b0;
	 cursor:pointer;
	 text-indent:20px;
	 margin-bottom:20px;
}

.toggleswitch h2{ font-size:1.2em; line-height:45px; color:#ffffff;}

.toggleswitch.expanded{
  background: url(../images/navigateup.png) no-repeat right #076293;
}

.togglecontent{	}

.special{ 
	font-weight:bold !important;
	color: #990000 !important;
}

.mobileShow{ display:none;}
.mobileMove{}


/* #Font-Face
================================================== */

@font-face {}



.specifications {width:100%; font:normal 13px/16px 'Open Sans',Helvetica,Arial,sans-serif;}
.specifications td { text-align:center; color:#445769; vertical-align:middle; padding:5px; height:0; border-right:1px solid #ececec; border-bottom:1px solid #ececec;}
.specifications td.first_td { border-left:1px solid #F1F1F1;}
.specifications td.last_td { width:100%; text-align:left;}
.specifications img.dot,.specifications img.shim{border:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important;}
.specifications tr.odd {background-color:#F9F9F9;}
.specifications td span { margin-left:30px;}

.specs-heading td{ background-color:#303d4a; color:#ffffff!important;}

.rightAlign td { color:#000;border-bottom:1px solid #ddd;border-right:1px solid #ddd;background-color:#ccc;}

.rightAlign.rightAlignHd td{color:#FFF;border-bottom:1px solid #4E6479;border-right:1px solid #4E6479;background-color:#303D4A;}

.specifications td.specialCol { color:#000; background-color:#A3D1FF; border:none;  font-weight:bold;}
.specifications td.specialCol-right{ color:#000; background-color:#DF8380;font-weight:bold; border:none; }


/*================================================== */
/*BAR CHART*/
/*================================================== */
.skills {
    margin: 20px auto;
    position: relative;
    padding-top: 0px;
	clear:both;
}

.apps {
    float: left;
    text-align: right;
    width: 20%;
    padding-right: 10px;
	padding-top:2px;
}

.apps p {
    padding: 2px 0;
    position: relative;
    text-align: left;
    z-index: 2;
    font-size: 1em;
    font-weight: 600;
    color: #373442;
}

.scale {
    padding-bottom: 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
}

.scale p {position: absolute; bottom: 0;left: -0.30%;}
.scale p.one {left: 24%;}
.scale p.two {left: 49%;}
.scale p.three {left: 74%;}
.scale p.four {left: 99%;}

.grid {
    border-left: 1px dotted #565761;
    border-bottom: 1px dotted #565761;
    float: left;
    padding: 5px 5px;
    position: relative;
    width: 75%;
}

.bar {
    float: left;
    height: 15px;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.bar .inner {
    background-color: #94aba3;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
}

.bar.pct-95 .inner {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: grow-90;
    right: 5%;
}

.bar.pct-75 .inner {
    -webkit-animation-duration: 3s;
    -webkit-animation-name: grow-75;
    right: 25%;
}

.bar.pct-60 .inner {
    -webkit-animation-duration: 5s;
    -webkit-animation-name: grow-60;
    right: 40%;
}

.bar.pct-20 .inner {
    -webkit-animation-duration: 5s;
    -webkit-animation-name: grow-60;
    right: 80%;
}

.v-divider {
    border-right: 1px dotted #565761;
    position: absolute;
    left: 0;
    right: 25%;
    bottom: 0;
    top: 0;
    z-index: 0;
}

.v-divider.one {
    right: 75%;
}

.v-divider.two {
    right: 50%;
}


/*==================================================
CSS Arrows 
================================================== */

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-top: 35px solid #fff;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}