/*
 * css/style.css
 * @author ran
*/

@font-face{
  font-family: 'Fabrica';
  src: url('../font/fabrica.otf'),
       url('../font/fabrica.eot'); /* IE9 */
} 
@font-face{
  font-family: 'BebasNeue';
  src: url('../font/bebasneue.ttf'),
       url('../font/bebasneue.eot'); /* IE9 */
} 
body {
  margin: 0;
  overflow-x: hidden;
}

/* Custom container */
.container {
  margin: 0 auto;
  max-width: 1170px;
}
.container-form {
  margin: 0 auto;/*
  max-width: 1024px;*/
  max-width: 300px;
  position: relative
}

/**/
.row-slider{
  border-bottom: 1px solid #AAA;
  margin-bottom: 1em;
  background: url(../img/bg-gray.png) repeat-x 0 0 #fff;/*
  background-image: linear-gradient(to bottom, #FFFFFF, #DDD);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDD', GradientType=0);*/
}

/* Navbar */
.navbar{margin: 0}

/* logo */
div.left-logo{
  float: left;
  position: relative;
  width: 200px
}
.logo-honda{
  background: url(../img/logo-honda.png) no-repeat center 4.5em #fff;
  border-width: 1px;
  border-style: none solid solid;
  border-color: #aaa;
  display: block;
  position: absolute;
  width: 200px;
  height: 9em;
  z-index: 1
}
.logo-wr{position: absolute; right: 0; top: -1em}

/* Top, Bottom menu*/
.top-menu{
  background-color: #d20809;
  border-color: #940606;
  border-style: none none solid;
  border-width: 1px;
  border-radius: 0
}
.sub-menu{
  background-color: #d20809;
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d20809',endColorstr='#d20809',GradientType=0);
  border-color: #df1f1f;
  border-style: solid none none;
  border-width: 1px;
  border-radius: 0;
  min-height: 10px
}
.goto-bar{
  background-color: #ab0707;
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ab0707',endColorstr='#ab0707',GradientType=0);
  border-color: #940606;
  border-style: none none solid;
  border-width: 1px;
  border-radius: 0;
  margin-top: 2em
}
.goto-bar .goto-separator{border-left: 1px solid #940606; border-right: 1px solid #be2323; display: inline-block; height: 20px; margin-top: 10px}
.goto-bar .brand{color: #fff; font: 14px/20px 'Fabrica'}
.goto-bar .brand span{color: #effb00}
.bottom-menu{
  background-color: #d20809 !important;
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d20809',endColorstr='#d20809',GradientType=0);
  border-color: #df1f1f;
  border-style: solid none none;
  border-width: 1px;
  border-radius: 0
}

/* Primary Menu 
#primary-menu{margin-top: 2em}
#primary-menu ul{margin: 0 2em}*/
#primary-menu ul li a{font: bold 10px/30px 'Fabrica'; padding: 10px}
.navbar .divider-vertical{
  background-image: linear-gradient(to bottom, transparent 15%, #c0c0c0 50%,transparent 85%);
  border: none;
  height: 50px;
  width: 1px
}

/* Secondary Menu */
#secondary-menu ul li a{color: #fff; font: 15px/20px 'Fabrica'; padding: 10px 3em}
#secondary-menu .nav > .active > a,
#secondary-menu .nav > .active > a:hover,
#secondary-menu .nav > .active > a:focus,
#secondary-menu.nav-collapse .nav > li > a:hover,
#secondary-menu.nav-collapse .nav > li > a:focus,
#secondary-menu.nav-collapse .dropdown-menu a:hover,
#secondary-menu.nav-collapse .dropdown-menu a:focus{
  background-color: transparent;
  border-radius: 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) inset
}

/* Footer Menu */
.row-footer{padding-top: 1em}
.footer-address{color: #fff}
#footer-menu .nav > .active > a,
#footer-menu .nav > .active > a:hover,
#footer-menu .nav > .active > a:focus,
#footer-menu.nav-collapse .nav > li > a:hover,
#footer-menu.nav-collapse .nav > li > a:focus,
#footer-menu.nav-collapse .dropdown-menu a:hover,
#footer-menu.nav-collapse .dropdown-menu a:focus{
  background-color: transparent;
  border-radius: 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) inset
}
#footer-menu ul.nav li a{color: #fff; font: 10px/20px 'Fabrica'; padding: 5px 30px}
.label-copy{clear: left; display: block; color: #fff; font: 10px/20px 'Fabrica'; text-shadow: 0 1px 0 #FFF}

span.label-footer{color:#fff; display: inline-block; float: left; font: bold 15px/40px 'Tahoma'}
ul.footer-affiliates{margin: 0; padding: 0; margin-top: .3em}
ul.footer-affiliates li{float: left; list-style: none}

.affiliates{
  background: url(../img/affiliates.png) no-repeat 0 0;
  display: block;
  width: 100px;
  height: 32px
}
.affiliates.card{}
.affiliates.termos{background-position: -100px 0}
.affiliates.wom{background-position: -190px 0}
.affiliates.tristar{background-position: -290px 0}
.affiliates.adira{background-position: -390px 0}
.affiliates.fif{background-position: -486px 0}
.affiliates.oto{background-position: -580px 0}
.affiliates.card:hover{background-position: 0 -32px}
.affiliates.termos:hover{background-position: -100px -32px}
.affiliates.wom:hover{background-position: -190px -32px}
.affiliates.tristar:hover{background-position: -290px -32px}
.affiliates.adira:hover{background-position: -390px -32px}
.affiliates.fif:hover{background-position: -486px -32px}
.affiliates.oto:hover{background-position: -580px -32px}




/* Flexslider */
.row-slider .flexslider{margin: 0}
.main-slider .flex-direction-nav .flex-prev{left: 0}
.main-slider .flex-direction-nav .flex-next{right: 0}
.promo-list .flex-direction-nav .flex-prev{left: -2em}
.promo-list .flex-direction-nav .flex-next{right: -2em}
.flexslider{margin: 0 0 25px}
.flex-control-nav{bottom: 1em}
.flex-control-paging li a:hover,
.flex-control-paging li a{background-color: #fff; border-radius: 0}
.flex-control-paging li a.flex-active{background-color: #ed1d24}

/* Sub Panel*/
.sub-panel{position: relative}
.sub-wrap{position: absolute; right: 0; top: -20em}
.sub-bg{
  background: url(../img/sub-panel.png) no-repeat 0 0;
  margin-bottom: 1em;
  width: 330px;
  height: 126px
}
.sub-btn{
  background: url(../img/sub-panel-button.png) no-repeat 0 0;
  display: block;
  width: 288px;
  height: 32px
}

/* Redbar */
.redbar{/*
  background-image: linear-gradient(to bottom, #ed1d24, #a90606);
  border-radius: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1d24', endColorstr='#a90606', GradientType=0);*/
  background: url(../img/redbar-repeat.png) repeat-x 0 0 #ec1d24;
  border-radius: 0;
}
.redbar h4{color: #f0f0f0}

/* Cari */
.search-motor{border: 1px solid #AAA; padding-bottom: 2em}
.search-motor .redbar{margin-bottom: 2em}

/* Compare */
.compare, .compare tr th{
  background-image: linear-gradient(to bottom, #FFFFFF, #F5F5F5);
  border-radius: 0;
  border-width: 2px;
  color: #AAA;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#F5F5F5', GradientType=0);
  text-align: center
}
.compare tr td.compare-thumb{text-align: center}
.compare ul{margin: 0; padding: 0}
.compare ul li{list-style: none; font: 10px 'Fabrica'; color: #333}
.compare span.slogan{font-weight: bold; display: block; text-align: center; margin-top: .5em}
.compare span.compare-price{
  color: #D20809;
  display: block;
  margin-bottom: .5em;
  font: bold 2em arial;
  text-align: center;
}

/* Red Head */
.compare .red-head{
  background-image: linear-gradient(to bottom, #ed1d24, #a90606); border-radius: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1d24', endColorstr='#a90606', GradientType=0);
}
.red-head h5{color: #f0f0f0; margin: 0}

/* Position */
ul.position{margin: 0; padding: 0}
ul.position li{list-style: none}
ul.position li span.department,
ul.position li span.location{width: 40px; display: inline-block}
ul.position li span.department{background: url(../img/department.png) no-repeat center 0; display: inline-block; height: 22px}
ul.position li span.location{background: url(../img/location.png) no-repeat center 0; display: inline-block; height: 22px}

li.divider-arrow{
  background: url(../img/bcrumb-right.png) no-repeat 0 0; width: 15px; height: 25px
}

/* sprite */
.dimension, .weight, .skeleton, .teleskopik, .sohc, .rpm, .liter, .matic, .battery{
  background: url(../img/product-icon.png) no-repeat 0 0;
  display: inline-block;
  margin-right: .5em;
  width: 22px;
  height: 20px  
}
.weight{background-position: 0 -160px}
.skeleton{background-position: 0 -20px}
.teleskopik{background-position: 0 -100px}
.sohc{background-position: 0 -40px}
.rpm{background-position: 0 -140px}
.liter{background-position: 0 -60px}
.matic{background-position: 0 -120px}
.battery{background-position: 0 -80px}

/* Button More */
a.logo-bca{background: url('../img/logo-bca.png') no-repeat 0 0; margin: .3em 0 0 .5em; display: block; width: 100px; height: 32px}
a.logo-bca:hover{background-position: 0 -32px}
ul.socmed {margin: 0; padding: .3em 0 0 0; float: right}
ul.socmed li{float: left; list-style: none}
ul.socmed li a{
  background: url('../img/socmed.png') no-repeat 0 0;
  display: block;
  width: 32px;
  height: 32px;
}
ul.socmed li a.fb{}
ul.socmed li a.fb:hover{background-position: 0 -32px}
ul.socmed li a.twt{background-position: -32px 0}
ul.socmed li a.twt:hover{background-position: -32px -32px}
ul.socmed li a.support{background-position: -64px 0}
ul.socmed li a.support:hover{background-position: -64px -32px}
/* Socmed 
div.socmed{
  background: url('../img/socmed.png') no-repeat 0 0;
  cursor: pointer;
  position: fixed;
  top: 25%;
  right: 0;
  width: 20px;
  height: 234px
}
div.socmed.show{width: 163px}
ul.socmed-icon{margin: 30px 0 0 35px; padding: 0}
ul.socmed-icon li{list-style: none}
ul.socmed-icon li a.socmed-live{
  background: url('../img/socmed-live.png') no-repeat 0 0;
  display: block;
  margin-bottom: .5em;
  width: 108px;
  height: 39px
}
ul.socmed-icon li a.socmed-fb{
  background: url('../img/socmed-fb.png') no-repeat 0 0;  
  display: inline-block;
  margin-right: .5em;
  width: 48px;
  height: 48px
}
ul.socmed-icon li a.socmed-twt{
  background: url('../img/socmed-twt.png') no-repeat 0 0;
  display: inline-block;
  width: 48px;
  height: 48px
}
ul.socmed-icon li a.socmed-live:hover{background-position: 0 -39px}
ul.socmed-icon li a.socmed-fb:hover,
ul.socmed-icon li a.socmed-twt:hover{background-position: 0 -48px}*/

/* table-red */
.table-red tr th{/*
  background-image: linear-gradient(to bottom, #ed1d24, #a90606);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1d24', endColorstr='#a90606', GradientType=0);*/
  background: url(../img/redbar-repeat.png) repeat-x 0 0 #ec1d24;
  color: #f0f0f0;
}

/**/
.tabs-wrap{/*
  position: absolute;
  top: 3em;
  width: 350px;
  z-index: 1*/
}
.tabs-wrap .nav-tabs{margin-bottom: 0}
.tabs-wrap .nav-tabs li{display: table-cell; float: none; font: 15px 'BebasNeue'; width: 1%}
.tabs-wrap .nav-tabs li a{
  background-color: #eee;
  color: #7d7c7c;
  display: block;
  padding: 5px;
  text-align: center/*background-color: #eee; border-radius: 0; color: #7d7c7c; padding: 5px 2px*/}
.tabs-wrap .nav-tabs li.active a{background-color: #FFF}

.tabs-wrap .tab-content{/*
  background-image: linear-gradient(to bottom, #fff, #e5e5e5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#fff', GradientType=0);*/
  border-width: 0;
  border-style: none;
  border-color: #d7d7d7;
  font-family: 'Fabrica';
  padding: 0 15px 0;
}
.tabs-wrap form{margin: 0}
.tabs-wrap .form-submit{border-top: 1px solid #ccc; padding: .5em 0; text-align: center}

.home-form legend{font: bold 2em 'BebasNeue'; margin-bottom: 0}
.home-form legend span.t1{color: #000}
.home-form legend span.t2{color: #D20809}
.home-form span.sub-title{font-size: 12px}
.home-form label{font-size: 12px}
.home-form .btn-search{
  background: url(../img/btn-cari.png) no-repeat 0 0;
  border: none;
  width: 110px;
  height: 27px
}
.home-form .btn-search:hover{background-position: 0 -27px; cursor: pointer}

.title-red{color: #AB0707}

.btn-red{
  background-image: linear-gradient(to bottom, #ed1d24, #a90606);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1d24', endColorstr='#a90606', GradientType=0);
  font: 15px 'BebasNeue';
  color: #FFF;
  text-shadow: none
}
.btn-red:hover, .btn-red:focus{
  background-image: linear-gradient(to bottom, #a90606, #ed1d24);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90606', endColorstr='#ed1d24', GradientType=0);
  background-position: 0 0;
  color: #FFF;
  transition: none
}

/* Breadcrumb */
ul.breadcrumb{
  background-image: linear-gradient(to bottom, #FFF, #f5f5f5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  display: inline-block;
  padding: 0 15px
}
ul.breadcrumb li a{display: inline-block; padding: 8px 0}

ul.bcrumb{margin: 0; padding: 0 .5em; border: 1px solid #aaa; border-radius: 4px; display: inline-block}
ul.bcrumb li{list-style: none; float: left; line-height: 25px}
ul.bcrumb li.active{padding: 0 .5em}
ul.bcrumb li a{display: block; line-height: 25px; padding: 0 .5em}
ul.bcrumb li a i.icon-home{margin-right: .5em}
ul.bcrumb li.divider-arrow{background: url(../img/bcrumb-r.png) no-repeat 0 0; width: 15px; height: 25px}

/* Product */
.promo, .news, .product{padding-bottom: 4em}
.product-list{width: 90%; margin: 0 auto;}
.promo-list{margin: 3em 2em 0}
.product-list .flex-control-nav{bottom: -1.7em}
.promo-list .flex-control-nav{bottom: -2em}

.promo, .csr, .product{padding-bottom: 2em}
.product-list{width: 90%; margin: 0 auto;}
.promo-list{margin: 3em 2em 0}
.product-list .flex-control-nav{bottom: -1.7em}
.promo-list .flex-control-nav{bottom: -2em}

.promo, .events, .product{padding-bottom: 2em}
.product-list{width: 90%; margin: 0 auto;}
.promo-list{margin: 3em 2em 0}
.product-list .flex-control-nav{bottom: -1.7em}
.promo-list .flex-control-nav{bottom: -2em}

.promo, .promotions, .product{padding-bottom: 2em}
.product-list{width: 90%; margin: 0 auto;}
.promo-list{margin: 3em 2em 0}
.product-list .flex-control-nav{bottom: -1.7em}
.promo-list .flex-control-nav{bottom: -2em}
/*
.product ul.product-list{display: inline-block}
.product ul.product-list li{list-style: none; float: left; margin-right: 3em}*/
.product .media{
  border-color: #d4d4d4;
  border-style: none solid solid;
  border-width: 1px;
  margin: 0;
  padding: 2em 0
}
/*
ul.product-nav{display: inline-block}
ul.product-nav li{list-style: none; float: left}
.nav-prev,
.nav-next{
  background: url(../img/home-lr-arrow.png) no-repeat 0 0;
  display: block;
  height: 25px;
  width: 24px;
}
.nav-next{background-position: -24px 0}
.nav-prev:hover{background-position: 0 -25px}
.nav-next:hover{background-position: -24px -25px}*/

/* home maps */
.home-maps{padding: 1em 0}
ul.home-maps-nav{margin: 0; padding: 0}
ul.home-maps-nav li{list-style: none; float: left}
ul.home-maps-nav > .active > a,
ul.home-maps-nav > .active > a:hover,
ul.home-maps-nav > .active > a:focus{background-color: #D20809}

/* related */
ul.related{margin: 0; padding: 0}
ul.related li{float: left; list-style: none; margin-bottom: 1em}
ul.related li span{display: block}

/* Product Gallery */
.thumb-wrap{margin-bottom: 1em; width: 272px; position: relative}
.add-compare{position: absolute; right: 2em; bottom: 4.5em}
.nav-list .product-type{background-color: #e9e9e9; border: 1px solid #ccc; color: #777; margin: 0; text-align: left}
.nav-list span.product-price{background-color: #f11025; border: 1px solid #c5081a; display: block; color: #fff}


ul.nav-compare li a{
  background-image: linear-gradient(to bottom, #FFFFFF, #f0f0f0);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f0f0f0', GradientType=0);
  color: #aaa;
  font: 1.5em 'BebasNeue';
  padding: .5em 1em
}
ul.nav-compare li.active a:hover, 
ul.nav-compare li.active a:focus, 
ul.nav-compare li.active a{
  background-image: linear-gradient(to bottom, #ed1d24, #a90606); border-radius: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1d24', endColorstr='#a90606', GradientType=0);
  color: #fff
}

/* Order */
.order-field legend{
  color: #640a0a;
}

/* Karir */
h5.updated{color: #edd71d}

/* Detail */
.detail-thumb{
  border-radius: 6px;
  background: linear-gradient(to bottom, #ccc 0%,#FFF 50%,#CCC 100%);
  padding: 2em;
  margin-bottom: 1em
}
.detail-thumb,
.detail-price{text-align: center}
.detail-price span{color: #f11025; font-size: 2em; font-weight: bold}
.detail-icon{text-align: left}
.detail-icon ul li{color: #777; margin: 1em}
.detail-icon ul li img{margin-right: 1em}

/* Fisheye */
.dock {position: relative; height: 50px; text-align: center;}
.dock-container {position: absolute; height: 50px; background: url(../img/dock/dock-bg2.gif); padding-left: 20px;}
a.dock-item {
  display: block;
  width: 40px;
  color: #000;
  position: absolute;
  top: 0px;
  text-align: center;
  text-decoration: none;
  font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {border: none; margin: 5px 10px 0px; width: 100%}
.dock-item span {display: none; padding-left: 20px}

@media (max-width: 979px) { 
  .home-span[class*="span"], .row-fluid .home-span[class*="span"] {
      -moz-box-sizing: border-box;
      display: block;
      float: none;
      margin-left: 0;
      width: 100%;
  }
}