/******** DEFAULT SETTING ********/

* {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

header, hgroup, section, footer, aside, nav, article, figure, figcaption, canvas, address { 
  display: block; 
}


body {
  margin:0;
  padding:0;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:100%;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  width:84%;
  margin:0 auto;
  position:relative;
}

img.fit {
  width:100%;
  height:auto;
  display:block;
  border:none;
}

.clearfix {
  clear:both;
}

a {
  text-decoration:none;
}


/****** Header & Nav ******/
header {
  width:100%;
  background:#050608;
  border-top:3px solid #fbf03e;
}

.header {
  width:84%;
  margin:0 auto;
  padding:1% 0 0;
}

.logo {
  float:left;
  width:14%;
}

.hdcol1 {
  float:right;
  width:70%;
}

.hdcol2 {
  float:right;
  width:70%;
}

p.topcontact {
  font-family: 'Archivo', sans-serif;
  font-weight:500;
  font-size:0.95em;
  color:#ffffff;
  text-align:right;
}

i.ticon {
  margin-right:6px;
}

i.l {
  display:inline-block;
  font-style:normal;
  margin:0 5px;
}



ul.nav {
  float:right;
  margin-top:3.5%;
  list-style:none;
}

ul.nav li {
  display:inline-block;
}

ul.nav a {
  display:block;
  padding:10px 23px;
  font-weight:700;
  font-size:0.95em;
  color:#f3d831;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

ul.nav a:hover {
  background:#f3d831;
  color:#000000;
}

ul.subnav {
  list-style:none;
  position:absolute;
  z-index:1000;
  background:#121212;
  width:130px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

ul.subnav li {
  display:block;
}

ul.subnav a {
  padding:5px 0 5px 23px;
  font-weight:500;
  color:#ffffff;
}

ul.nav li:hover ul.subnav {
  visibility:visible;
  opacity:1;
}



/****** Home ******/
.homebanner {
  width:100%;
}

/**** Home welcome ****/
section.hmwelcome {
  width:100%;
  padding:30px 0;
  margin-top:-1px;
  background:url('images/blackmetal.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
}

.welcol1 {
  float:left;
  width:57%;
}

.welcol1 h1 {
  font-size:1.8em;
  font-weight:400;
  color:#ffffff;
}

.welcol1 h1 span {
  font-size:2.1em;
  font-weight:700;
  color:#f3d831;
}

.welcol1 p {
  font-size:1.1em;
  color:#ffffff;
}

.welcol2 {
  float:right;
  width:43%;
  margin-top:2%;
  text-align:right;
}

img.wellogo {
  display:inline-block;
  width:14%;
  margin-left:6%;
}


/**** Home sec 1 ****/
.hmsec1 {
  width:100%;
  padding:40px 0;
}

h3.sectitle {
  font-size:3.5em;
  font-weight:500;
  color:#050608;
  text-align:center;
}

h3.sectitle2 {
  color:#ffffff;
}

p.secintro {
  font-size:1.5em;
  color:#050608;
  text-align:center;
  line-height:100%;
}

p.secintro2 {
  color:#e5bd1f;
}

ul.mdnav {
  width:50%;
  margin:40px auto 0;
  background:#e1e1e1;
  text-align:center;
  list-style:none;
  -webkit-border-radius:60px;
  border-radius:60px;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

ul.mdnav li {
  display:inline-block;
  margin:0 4%;
  padding:10px 0;
}

ul.mdnav a {
  display:inline-block;
  font-size:0.95em;
  color:#050608;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

ul.mdnav:hover {
  background:#050608;
}

ul.mdnav2:hover {
  background:#e5bd1f;
}

ul.mdnav:hover a {
  color:#ffffff;
}

ul.mdnav a:hover {
  color:#f3d831;
}

ul.mdnav2 a:hover {
  color:#000000;
}


/** BX slider **/
.bxpanel {
  width:100%;
  margin-top:40px;
}

.bxcontent {
  width:84%;
  margin:0 auto 1%;
  /*
  padding:2% 3% 3%;
  border:1px solid #cececf;
  */
}

h1.bxbrand {
  font-weight:500;
  font-size:1.8em;
  color:#050608;
  text-align:center;
}

hr.line1 {
  width:80px;
  margin:10px auto 10px;
  border-top:4px solid #e5bd1f;
  border-bottom:none;
  border-left:none;
  border-right:none;
}

.bxcol {
  float:left;
  width:22%;
  margin:30px 4% 0 0;
  padding-bottom:10px;
  border:2px solid transparent;
  overflow:hidden;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

.bxcol4 {
  margin-right:0;
}

.bxcol:hover {
  border:2px solid #dfdfdf;
}

.carpanel {
  width:100%;
}


.bxcol h2 {
  font-size:1.3em;
  font-weight:500;
  color:#050608;
  text-align:center;
}



/****** Hot sale Cars ******/
.hotpanel {
  width:100%;
  padding:40px 0;
  background:#050608;
  border-top:8px solid #e5bd1f;
  position:relative;
}


i.hottag {
  display:block;
  position:absolute;
  top:-1%;
  left:8%;
  width:11%;
}

.hotcolL {
  float:left;
  width:47%;
  margin-top:50px;
}

.hotcolR {
  float:right;
  width:47%;
  margin-top:50px;
}

h1.hotbrand {
  font-size:1.3em;
  font-weight:400;
  color:#e5bd1f;
}

.hotbox1 {
  float:left;
  width:48%;
  margin-top:30px;
}

.hotbox2 {
  float:right;
  width:48%;
  margin-top:30px;
}

.carbox {
  width:100%;
  overflow:hidden;
}

img.carimg {
  display:block;
  width:100%;
  height:auto;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

.hotbox1:hover img.carimg,
.hotbox2:hover img.carimg {
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
}

.carname {
  width:100%;
  background:#e5bd1f;
  text-align:center;
  padding:6px 0;
}

.carname h2 {
  font-size:1.4em;
  font-weight:600;
  color:#000000;
}

.carname p {
  font-size:1.2em;
  font-weight:400;
  color:#ffffff;
  border-top:1px solid #ffffff;
  width:80%;
  margin:3px auto 0;
  padding-top:3px;
}

.carname p span {
  font-size:0.8em;
}


/****** Need Help ******/
section.needhelp {
  width:100%;
  padding:40px 0;
  background:url('images/bg-help.jpg');
  background-repeat:repeat-x;
  text-align:center;
}

section.needhelp p {
  font-size:1.5em;
  color:#050608;
}

section.needhelp h4 {
  font-size:1.8em;
  color:#050608;
  font-weight:500;
}

section.needhelp h5 {
  font-size:2.0em;
  color:#e5bd1f;
  font-weight:600;
}


/****** Brand Landing ******/
.brandbanner {
  width:100%;
  background:url('images/bg-brand-banner2.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
  text-align:center;
  padding:6% 0 4%;
}

img.brnlogo {
  display:inline-block;
  width:13%;
}

h1.brslogan {
  margin-top:10px;
  font-size:2.8em;
  color:#050608;
  font-weight:600;
  font-style:italic;
}


section.brandsec {
  width:100%;
  padding:40px 0;
  background:#ffffff;
}

h1.brandname {
  font-weight:500;
  font-size:1.8em;
  color:#050608;
  text-align:center;
}

.brncol {
  float:left;
  width:22%;
  border:2px solid transparent;
  margin:30px 4% 0 0;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

.brncol4 {
  margin-right:0;
}

.brncol:hover {
  border:2px solid #dfdfdf;
}

.carname2 {
  width:100%;
  text-align:center;
}

.carname2 h2 {
  font-size:1.4em;
  font-weight:600;
  color:#050608;
}

.carname2 p {
  font-size:1.2em;
  font-weight:400;
  color:#a58d2e;
}

.carname2 p span {
  font-size:0.8em;
}



/****** Model Landing ******/
.mdbanner {
  width:100%;
  /*background:url('images/bg-modelbanner.jpg');*/
  background:#ffffff;
  padding:25px 0;
}

.mdbanner-promo {
  width:84%;
  margin:0 auto;
}

/**** Model logo ****/
.mdsec {
  width:100%;
  padding:40px 0;
  background:url('images/blackmetal.jpg');
  background-repeat:no-repeat;
  background-position:center top;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
  text-align:center;
}

.mdsecwrap {
  width:56%;
  margin:0 auto;
}

img.mdlogo {
  display:block;
  float:left;
  width:24%;
  margin-right:5%;
}

.mdlink {
  float:left;
  width:71%;
}

a.mdlink1 {
  display:block;
  float:left;
  width:48%;
  padding:8px 20px;
  border:1px solid #666666;
  -webkit-border-radius:4px;
  border-radius:4px;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

a.mdlink2 {
  display:block;
  float:right;
  width:48%;
  padding:8px 20px;
  border:1px solid #666666;
  -webkit-border-radius:4px;
  border-radius:4px;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

a.mdlink1 img,
a.mdlink2 img {
  display:block;
  float:left;
  width:25%;
}

a.mdlink1 p,
a.mdlink2 p {
  float:left;
  width:75%;
  text-align:center;
  font-size:1.2em;
  color:#ffffff;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

a.mdlink1 span,
a.mdlink2 span {
  display:block;
}

a.mdlink1:hover,
a.mdlink2:hover {
  background:#000000;
  border:1px solid #7c600d;
}

a.mdlink1:hover p,
a.mdlink2:hover p {
  color:#f3d831;
}


/**** Pricing.Rebate.Free Gift ****/
section.mdsec1 {
  width:100%;
  background:#f5f5f5;
  padding:40px 0 45px;
}

h1.mdname {
  font-size:2.5em;
  font-weight:600;
  color:#050608;
  text-align:center;
}

h1.mdname2 {
  color:#ffffff;
}


article.promotext {
  width:100%;
  margin-top:40px;
}

p.mdpromo1 {
  font-size:1.5em;
  color:#050608;
  text-align:center;
}

p.mdpromo1 strong {
  font-weight:500;
  color:#a58d2e;
}

p.mdpromo2 {
  font-size:1.8em;
  color:#050608;
  font-weight:600;
  text-align:center;
  line-height:180%;
}

.pricing {
  width:100%;
  margin:40px auto 0;
}

/** Table price 1 **/
table.price1 {
  margin-top:30px;
  width:100%;
  border-collapse: collapse;
  border:2px solid #ece4c6;
}

col.monthly-promo {
  background:#fbf3d2;
}

table.price1 th {
  border:1px solid #dad3b6;
  font-size:1.2vw;
  color:#a58d2e;
  padding:8px 4px;
  font-weight:500;
}

table.price1 td {
  border:1px solid #dad3b6;
  padding:10px;
}

table.price1 h2 {
  font-size:1.2vw;
  color:#050608;
  font-weight:500;
}

table.price1 p {
  font-size:1.3vw;
  color:#050608;
  text-align:center;
}

table.price1 p span {
  font-size:1vw;
  margin-right:10px;
}

table.price1 h3 {
  font-size:1.3vw;
  color:#050608;
  text-align:center;
  font-weight:400;
}

p.remarks {
  margin-top:10px;
  font-size:0.95em;
  color:#050608;
  line-height:150%;
}

p.ctperson {
  margin-top:30px;
  font-size:1.3em;
  color:#050608;
  text-align:center;
}


/**** Model Color ****/
section.mdsec2 {
  width:100%;
  padding:40px 0;
}

.mdcolor {
  width:84%;
  margin:30px auto 0;
}

img.model {
  display:block;
  width:66%;
  margin:0 auto;
  height:auto;
}

p.color {
  text-align:center;
  font-size:1.2em;
  color:#050608;
  font-weight:600;
}

p.color em {
  font-size:0.9em;
  color:#a58d2e;
  font-weight:400;
  font-style:normal;
}

p.color span {
  display:block;
  font-size:0.8em;
  color:#a58d2e;
   font-weight:400;
}


/**** Model Gallery ****/
section.mdsec3 {
  width:100%;
  background:#050608;
  padding:40px 0 0;
}

p.mdintro {
  font-size:1em;
  color:#efefef;
  text-align:center;
  margin-top:20px;
  padding:0 20%;
  line-height:150%;
}

.galsec {
  width:100%;
  margin-top:40px;
  background:#ffffff;
}

.galsec figure {
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

.galsec figure:hover {
  opacity:0.9;
}

.galrow {
  width:100%;
  overflow:hidden;
}

.galcol {
  float:left;
  width:16.6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666%;
  background:#ffffff;
}

.videopanel {
  margin:40px auto 0;
  width:50%;
}

iframe.videoset {
  display:block;
  width:100%;
  height:300px;
}




/**** Perodua Axia only ****/
.galsec-axia {
  width:100%;
  margin-top:40px;
  background:#050608;
}

.axiacol {
  float:left;
  width:50%;
  background:#ffffff;
}



/**** Booking Test Drive ****/
section.mdsec4 {
  width:100%;
  background:#ffffff;
  padding:40px 0;
}


.tdrive {
  width:60%;
  margin:40px auto 0;
}

p.tdtext {
  margin:30px;
  font-size:1.1em;
  color:#a58d2e;
  text-align:center;
}

.formpanel {
  width:100%;
  margin-top:40px;
}

.fmrow {
  width:100%;
  overflow:hidden;
  margin-bottom:8px;
}

label.info {
  display:block;
  float:left;
  width:33%;
  font-size:1em;
  color:#444444;
}

.fmrow i {
  display:block;
  float:left;
  width:2%;
  font-size:1em;
  color:#050608;
  font-style:normal;
}

.fill {
  float:left;
  width:65%;
}


input.data {
  width:100%;
  padding:6px 12px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:0.95em;
  color:#050608;
  background:#fafafa;
  border:1px solid #dad3b6;
  outline:none;
  margin-bottom:10px;
}

ul.tdlist {
  margin:0 0 0 6%;
  font-size:0.95em;
  color:#444444;
}

ul.tdlist li {
  margin-bottom:5px;
}

select.data-select {
  width:100%;
  padding:6px 12px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:0.95em;
  color:#050608;
  background:#fafafa;
  border:1px solid #dad3b6;
  outline:none;
  margin-bottom:10px;
}

.fmrow2 {
  width:100%;
}


input.tick {
  margin-top:4px;
}

label.tickitem {
  font-size:0.95em;
  color:#444444;
}


input.btn {
  display:inline-block;
  margin:20px 5px 0 5px;
  padding:6px 25px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size:0.95em;
  color:#ffffff;
  background:#050608;
  border:none;
  outline:none;
  cursor:pointer;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

input.btn:hover {
  background:#a58d2e;
}




/****** Footer ******/
footer {
  width:100%;
}

section.ftsec1 {
  width:100%;
  background:#222222;
}

.ftwrap {
  width:60%;
  margin:0 auto;
  padding:30px 0;
}

.ftcol {
  float:left;
  width:25%;
  text-align:center;
}

/*
.ftcol2 {
  border-left:1px solid #555555;
}


.ftcol3 {
  border-left:1px solid #555555;
  border-right:1px solid #555555;
}
*/

h4.ftbrand {
  font-size:0.9em;
  color:#f3d831;
  font-weight:600;
  margin-bottom:15px;
}

ul.ftnav {
  list-style:none;
}

ul.ftnav li {
  margin-bottom:5px;
}

ul.ftnav a {
  font-size:0.95em;
  color:#aaaaaa;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  transition:0.3s;
}

ul.ftnav a:hover {
  color:#f3d831;
}


section.ftsec2 {
  width:100%;
  background:#050608;
  padding:25px 0;
  border-bottom:3px solid #fbf03e;
}


.ftsec2col1 {
  float:left;
  width:60%;
  font-weight:400;
  font-size:0.9em;
  color:#aaaaaa;
}

img.ftlogo {
  width:20%;
  margin-right:3%;
}

span.ftcontact {
  display:inline-block;
}

i.l2 {
  display:inline-block;
  font-style:normal;
  margin:0 5px;
}



a.socialink {
  font-size:1em;
  color:#aaaaaa;
}

a.socialink:hover {
  text-decoration:underline;
}


.ftsec2col2 {
  float:right;
  width:40%;
  text-align:right;
  font-size:0.8em;
  color:#aaaaaa;
  letter-spacing:1px;
  padding-top:4%;
}