/*
* style.css
*
* Project Name: KANSAI EXHAUST
* Date Start: 14-Jan-2015 10.00 WIB;
* Author: Judah Andrew S
* Email: yehudha_mail@yahoo.com
*
* Copyright 2015. All Right Reserved
* 
*/

body, #sb-site {font-family: 'Arial', sans-serif; font-style: normal; color: #fff; font-size: 14px; text-transform: none; text-decoration: none; letter-spacing: 0em; word-spacing: 0em; line-height: 1.4; background-color: #242424; overflow-x: hidden}
h1, h2, h3, h4, h5, h6 {margin: 0px !important; color: #fff; display: inline-block;font-family: 'Oswald', sans-serif}
.normal-font {font-family: 'Arial', sans-serif !important;}
.style-font {font-family: 'Oswald', sans-serif !important;}
section {position: relative;}
a {color: #fff}
a:hover, a.active, a:focus {text-decoration: none; color: #f16101}
.no-pad {padding: 0px !important; }
.no-margin {margin: 0px !important; }
.btn-black {font-family: 'Oswald', sans-serif !important; padding: 5px 10px; background-color: #000;}
.btn-black h5 {font-family: 'Oswald', sans-serif; color: #fff;}
.btn-black:hover {background-color: #f16101}
.btn-kansai {background-color:#f16101; border-color:#f16101;}
.btn-kansai:hover {background-color:#ff711a !important; border-color:#ff711a;}

.orange-link {color: #f16101; line-height: 3.6; float: right;}
.orange-link:hover {text-decoration: underline;}
.orange-span {background: #f16101; padding: 10px; display: inline-block;}
.clear-space {width: 100%; display: block; height: 30px;}
.img-rwd {width: 100%; max-height: 100%; border: 0px !important}

.orange-text {color: #f16101 !important;}

/* HEADER SECTION */
#header-section {font-family: 'Oswald', sans-serif; z-index: 1 !important;}
.first-header {background: url(../images/bg_header.jpg) center top repeat-x; height: 71px; padding: 10px 0;}
.logo-kansai {float: left; z-index: 100; clear: both; position: absolute;}
.top-nav {float: right; color: #fff;  font-size: 12px;}
.top-nav ul li {display: inline-block; list-style: none; padding: 0 10px; line-height: 51px;}
.top-nav ul li:last-child {padding-right: 0px;}
.menu-button-rwd {display: none; position: absolute; right: 0px;}

.second-header {background-color: rgba(0,0,0,0.7); padding: 0;}
.mid-nav {float: left;}
.mid-nav ul {padding: 0px !important; margin: 0px !important}
.mid-nav ul li {display: inline-block; list-style: none; padding-right: 0px; font-size: 14px;}
.dropdown-toggle {padding: 9px 10px; text-decoration: none; display: block;}
.dropdown-toggle:hover, .dropdown-toggle:focus {background-color: #000; padding: 9px 10px; color: #f16101; text-decoration: none;}
.dropdown-toggle small {font-size: 10px; padding: 0 0 0 5px;}

.dropdown-menu > li > a {padding: 0; color: #eee;}
.dropdown-menu > li > a:hover {color: #f16101; background-color: transparent;}

.dropdown-submenu{position:relative; width: 100%; overflow: hidden;}
.dropdown-submenu>.dropdown-menu{top:0; position: relative;}
.dropdown-submenu>a:after{float:right;width:0;height:0;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #f16101;
  text-decoration: none;
  background-color: transparent;
  padding: 0px;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #f16101;
  text-decoration: none;
  background-color: transparent;
  padding: 0px;
}

.parjoo-dm h5 {text-transform: uppercase;}
.parjoo-dm .sub-menu li {padding-left: 30px;}
.parjoo-dm .sub-menu li.open a:hover {padding: 0px;}
.parjoo-dm .dropdown {position: static;}
.parjoo-dm .dropdown-menu {left: auto;}
.dropdown-menu li {display: block !important; padding-right: 0px !important}
.parjoo-dm .parjoo-dm-content {padding: 0px 20px 30px; background-color: #000;}
.parjoo-dm .dropdown.parjoo-dm-w .dropdown-menu {left: 0; right: 0; margin: 0px !important;}
.dropdown-menu {background: none !important; border: 0px;   -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
.car-type {}
.car-type .caption {padding-top: 20px;}
.product-cat ul li {padding: 20px 0 0 5px; font-family: 'Arial', sans-serif; font-size: 12px;}
.product-cat h6 {padding: 9px 10px; text-transform: uppercase; display: block;}
.car-type ul li {font-weight: 300px !important; font-family: 'Arial', sans-serif; font-size: 12px;}
.car-type-cols {width: 33%; display: inline-block; float: left; padding: 0 20px;}


.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabsleft {background-color: #fff; margin: 20px 0px 0px 0px !important;}
.tabs-left > .nav-tabs > li {float: none; background: #ddd; border: none;}
.tabs-left > .nav-tabs > li > a {min-width: 80px; margin-right: 0; margin-bottom: 3px; border: none !important;}
.tabs-left > .nav-tabs > li > a > h5 {color: #000 !important; line-height: normal;}
.tabs-left > .nav-tabs {float: left; margin-right: 19px;}
.tabs-left > .nav-tabs > li > a {margin-right: -1px;}
.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {}
.tabs-left > .nav-tabs .active > a h5, .tabs-left > .nav-tabs .active > a:hover > h5, .tabs-left > .nav-tabs .active > a:focus {color: #f16101 !important;}
.tab-pane {padding: 10px; overflow: hidden;}
.tab-pane ul li a {color: #555; font-family: 'Oswald', sans-serif; font-size: 13px;}
.tab-pane ul li a:hover {text-decoration: underline;}
.tab-pane ul li {padding: 10px;}
.cols-cartype {width: 27%; position: relative; float: left;}

.sosmed-wrap {float: right; padding-top: 7px; display: block;}
.sosmed-wrap span {border: 0px; float: right;}

/* BREADCRUMBS SECTION */
#breadcrumbs-section {width: 100%; background-color: #333}
#breadcrumbs-section p {float: right; font-size: 11px; color: #777; line-height: 11px; padding: 10px 10px 0 0;}

/* SLIDE SECTION */
#slide-section {margin-top: -41px;}
.slide-info {padding: 15px 12px 5px 12px}
.slide-thumb {padding: 15px 15px 0px 15px; background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
}

#front-thumb {overflow: hidden; margin: 25px -4px 0px -4px;}
#front-thumb .col-md-4 { padding: 0 5px !important;}
#front-thumb .item {background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */margin-top: 10px; padding: 15px !important; background-color: #111;}
#front-thumb h5 {padding-top: 10px;}
#front-thumb a {margin-top: 10px;}
#front-thumb .item img {display: block; width: 100%; height: auto;}
#front-thumb .item hr {border-top: 1px solid #333 !important; margin-bottom: 0px !important;}
#front-thumb a img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  
   -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */  /* Required for IE 5, 6, 7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
#front-thumb a:hover > .item img {cursor: pointer; -webkit-filter: none; -moz-filter: none; -ms-filter: none; filter: none; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1;  opacity: 1;}


/* Owl Carousel Thumb Slide */
#sync1 .item img {display: block; width: 100%; position: relative;}
#sync2 .item img {width: 100%; max-height: 100%; padding: 0 5px; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  
   -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ 	/* Required for IE 5, 6, 7 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5;	opacity: 0.5;}
#sync2 .item img:hover {cursor: pointer; -webkit-filter: none; -moz-filter: none; -ms-filter: none; filter: none;}
#sync2 .synced .item img {-webkit-filter: none; -moz-filter: none; -ms-filter: none; filter: none; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1;	opacity: 1;}

.arrow-prev {width: 40px; height: 58px; background: url(../images/arrow_ki.png) top center no-repeat;}
.arrow-prev:hover {background: url(../images/arrow_ki.png) bottom center no-repeat;}
.arrow-next {width: 40px; height: 58px; background: url(../images/arrow_ka.png) top center no-repeat;}
.arrow-next:hover {background: url(../images/arrow_ka.png) bottom center no-repeat;}

.slide-thumb-brand {margin-top: -30px;}

/* Tooltip */

#tooltip{text-align: left; color: #fff; background: rgba(175, 26, 6, 0.7); position: absolute; z-index: 100; padding: 10px;}
#tooltip img {max-width: 100%; padding-bottom: 10px;}
#tooltip p {font-size: 12px;}
#tooltip:after /* triangle decoration */{width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(175, 26, 6, 0.7); content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px;}
#tooltip.top:after {border-top-color: transparent; border-bottom: 10px solid #111; top: -20px; bottom: auto;}
#tooltip.left:after {left: 10px; margin: 0;}
#tooltip.right:after {right: 10px; left: auto; margin: 0;}

/* CONTAINER SECTION */
#content-section {margin-top: 20px; height: auto;}
.front-title {display: block; padding-top: 5px; margin-bottom: 0px; overflow: hidden;}
.front-title div {padding: 0px;}
.home-title {font-size: 21px;}
.about-us small {color: #777;}

.brand-section {background: url(../images/bg_brand.jpg) top center no-repeat; background-size: 100%; margin-top: 0px !important; padding-top: 20px;}
.search-product-wrap {background: rgb(35,36,40); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(35,36,40,1) 0%, rgba(65,65,65,1) 50%, rgba(50,50,62,1) 50%, rgba(53,53,53,1) 51%, rgba(45,45,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,36,40,1)), color-stop(50%,rgba(65,65,65,1)), color-stop(50%,rgba(50,50,62,1)), color-stop(51%,rgba(53,53,53,1)), color-stop(100%,rgba(45,45,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(35,36,40,1) 0%,rgba(65,65,65,1) 50%,rgba(50,50,62,1) 50%,rgba(53,53,53,1) 51%,rgba(45,45,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(35,36,40,1) 0%,rgba(65,65,65,1) 50%,rgba(50,50,62,1) 50%,rgba(53,53,53,1) 51%,rgba(45,45,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(35,36,40,1) 0%,rgba(65,65,65,1) 50%,rgba(50,50,62,1) 50%,rgba(53,53,53,1) 51%,rgba(45,45,45,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(35,36,40,1) 0%,rgba(65,65,65,1) 50%,rgba(50,50,62,1) 50%,rgba(53,53,53,1) 51%,rgba(45,45,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232428', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */ width: 100%; height: auto; position: relative; display: inline-block;}
.selector-cols {border-right: 1px solid #444;}
.selector-cols:last-child {border: 0px;}
.selector-cols .btn {margin: 8px 0;}

.brand-selector {border-radius: 0px !important; background-color: #222; border-color: #000; margin: 8px 0; color: #aaa;}

/* Gallery */
.title-brand {width: 100%; position: relative; text-align: center; padding: 20px 0}
.freewall {margin-bottom: 50px; margin-top: 15px; height: auto;}
.freewall .brick {display: block; border:5px solid #fff;}
.freewall img {width: 100%;}
.freewall .medium {width: 200px;}
.freewall .large {width: 990px;}
.freewall h5 {padding: 10px 0;}
.freewall hr {margin: 0px 0px 15px 0px !important; border-color: #333;} 
.brand-detail {background-color: #0a0a0a; padding: 20px; border: 0px !important}
a.brand-detail:hover, .brand-selector:focus {box-shadow: 0 0 5px rgba(172, 51, 42, 1); -webkit-box-shadow: 0 0 5px rgba(172, 51, 42, 1); -moz-box-shadow: 0 0 5px rgba(172, 51, 42, 1); border:1px solid rgba(0,0,255, 0.8);}
.brand-selector:focus {border: 0px;}
.brand-selector {color: #aaa;}

/* MAP */
.map-kansai {margin-bottom: 20px;}
.map-kansai iframe {border: none;}

/* BOTTOM NAV SECTION */
#bottomnav-section {background-color: #111; padding: 0px 0 20px 0; margin-top: 20px;}
#bottomnav-section ul {padding: 0px !important;}
#bottomnav-section ul li {font-family: 'Oswald', sans-serif; font-weight: 300; line-height: 1.5; list-style: none;}
#bottomnav-section h4 {padding-top: 10px;}
#bottomnav-section .caption {padding-bottom: 10px;} 
#ec-button {position: absolute; right: 10px; top: 0;}
.expand-collapse {width: 100%; height: 40px;}
.collapse-close {width: 100px; height: 25px; background: url(../images/btn_expand.jpg) top center no-repeat; float: right;}
.collapse-open {width: 100px; height: 25px; background: url(../images/btn_collapse.jpg) top center no-repeat; float: right;}
.ec-button-expand:hover, .ec-button-collapse:hover {cursor: pointer;}

/* FOOTER SECTION */
#footer-section {background-color: #f16101; padding: 10px;}
.footer-cols {width: 25%; display: inline-block; position: relative; float: left;}
.footer-left small {float: left;}
.footer-right small {float: right;}


@media (min-width: 1200px) {
  .container {
    width: 990px;
  }
}

@media (max-width: 1200px) {
} 

@media (max-width: 991px) {
.front-title div {text-align: center;}
.orange-link {float: none; line-height: normal; padding-top: 10px; display: block;}

.search-product-wrap {padding: 8px 0;}
.selector-cols {border: 0px;}

.footer-left small, .footer-right small {float: left;}
.footer-cols {width: 50%}
} 

 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
#slide-section {margin-top: 0px;}	

.top-nav {display: none;}
.menu-button-rwd {display: block; width: 100%; z-index: 1}
.menu-button-rwd > .dropdown-toggle {font-size: 20px; float: right;}
.rwd-top-nav {left: 0; background-color: #000 !important; width: 100%; border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px;}
.rwd-top-nav li a {color: #fff; padding: 10px 10px 10px 30px;}
.rwd-top-nav li a:hover, .rwd-top-nav li a.active {color: #f16101; background-color: rgba(255,255,255,0.2);} 

.sosmed-wrap {display: none;}	
.mid-nav a {font-size: 11px;}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
.car-type-cols {width: 100%}

.freewall .medium {width: 100%}

.footer-cols {width: 100%}	
#bottomnav-section h4 {font-size: 14px;}	
#bottomnav-section ul li {font-size: 11px;}

#footer-section {font-size: 12px;}
}