@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'Univers-Condensed';
  src: url('../font/Univers-Condensed/Univers-Condensed.eot?#iefix') format('embedded-opentype'),  url('../font/Univers-Condensed/Univers-Condensed.otf')  format('opentype'),
	     url('../font/Univers-Condensed/Univers-Condensed.woff') format('woff'), url('../font/Univers-Condensed/Univers-Condensed.ttf')  format('truetype'), url('../font/Univers-Condensed/Univers-Condensed.svg#Univers-Condensed') format('svg');
  font-weight: normal;
  font-style: normal;
}
a img{border:0;}
.clr{clear:both:}
body{ font-family: 'Univers-Condensed' !important; background:#f4f4f5;font-size: 14px !important;}
header{width:300px;  padding-bottom:2%; float:left; height:100%; }
header .logo {padding-top:5%; padding-left:30px; width:214px;}  
header .logo img{ margin-bottom:5%;}     
header .info{text-align:right; font-size:20px; color:#6a6a6a; line-height:20px;font-size: 17px !important;}
nav{width:300px;}
nav ul{background: #47a3da; width:100%; margin-left:0px; padding-left:0px;}
nav ul li{list-style:none; text-align:right; line-height:20px; 	display: block;	color: #fff; font-size: 1.1em;	font-weight: 300;	border-bottom: 1px solid #258ecd; padding: 10px;   background:#47a3da; }
.frontt ul li{width:129px !important; border-right: 1px solid #258ecd !important; float:left; list-style:none; text-align:right; line-height:20px; 	display: block;	color: #fff; font-size: 1.1em;	font-weight: 300;	border-bottom: 1px solid #258ecd; padding: 10px;   background:#47a3da; }
.frontt ul li:hover{width:129px !important;border-right: 1px solid #258ecd !important; background: url(../images/main-menu-active.png) #258ecd no-repeat right; background-position:95% 50%; 
	display:block;
	padding: 10px;}
nav ul li img{vertical-align:middle;}
nav ul li:hover{	background: url(../images/main-menu-active.png) #258ecd no-repeat right; background-position:95% 50%; 
	display:block;
	padding: 10px;
	
	}
nav ul li a{color:#fff; text-decoration:none; margin-right:20px;}

nav ul li.active{	background: url(../images/main-menu-active.png) #258ecd no-repeat right; margin-left:-35px; background-position:95% 50%; 
	display:block;
	padding: 1em;
	width:100%;}
nav ul li.menu-feed a{text-decoration:none;color:#000080; font-size:16px;}
nav ul li.menu-feed a:hover{font-size:16px !important;}

.product-imgs{width: 160px;padding-bottom: 10px;}
.core-cl{width: 72px;}
.td-form{vertical-align: top; padding-left: 30px;}




section{float:left; margin-left:3%; margin-top:-10px; width:970px;}
.utility-header{background:#FFF; border:1px solid #efeff0;  box-shadow: 5px 5px 5px #888888; border-radius:5px; width: 970px;}
.utility{ padding:20px 20px 10px 20px; float:left;}
.utility ul{padding:0px !important; margin:0px !important;}
.utility li{list-style:none; display:inline-block; padding-right:3px;font-size: 15px;}
.utility li img{padding-right:5px; vertical-align:middle;}
.part{float:right; padding-top:40px; color:#535353; padding-right:20px;margin-top: -14px;}
.textt{vertical-align:middle; height:30px; border:2px solid #dedede; color:#fff; margin:0 5px;}
.partnumber{width:360px; float:right; background:#eaeaea; margin-top:1px; padding:10px; border:2px solid #eaeaea; color:#535353;left: 58%;position: absolute;
z-index: 10000;}
.banner .banner-text{ width: 330px;
margin-left: 12%;
margin-top: 14%; color:#4e4e4e; float:left;}
#loader{width: 24px;
margin-left: 38%;
margin-top: 5%;
margin-bottom: 2%;}
#display li:hover{background: #DF1615 none repeat scroll 0% 0%;
color: #FFF;}
#display ul{padding: 5px 16px;}
#display li{padding: 7px 5px;
list-style: outside none none;
cursor: pointer;}
.banner .banner-text h2{ font-size:30px; margin:0 !important; padding:0 !important;}.banner .banner-text p{ font-size:12px; line-height:24px;}
.banner .banner-img{float:left; margin-left: 13%;
margin-top: 3%;}
.banner-table{margin-top: -20%;
position: relative;
z-index: 1;}
.widget{background:url(../images/widget.png) no-repeat; width:468px; height:251px; margin-top: -5%; float:left;}
.widget h3{color:#df1615; font-size:25px; margin:20px; padding:0;}
.widget p{ color:#8b8b8b; font-size:14px;text-align:justify; width:90%; line-height:24px; padding:0px 20px;}
.see{float:right; color:#e12525; padding-right:10px;}
.products .latest{width:900px; border:1px solid #989898; background:#989898; padding:10px 30px; color:#FFF; font-size:28px; margin-top:5%;}
.fuel{width:165px; border:1px solid #FFF; background:#ffffff; box-shadow: 1px 1px 1px #888888; padding:30px; text-align:center; margin-bottom:10px; }
.pro-fuel{text-align:center; width:230px; float:left; margin-right:12px;}
.pro-fuel h4{margin:10px 0px; padding:0px; color:#5c5c5c; font-size:22px;  }
.m0{margin-right:0 !important;}
.more{ width:100px; background:#df1615; border:1px solid #df1615; color:#FFF; padding:10px; margin:10px 0; border-radius:5px; cursor:pointer; font-size:16px;}
.more1{margin-top:20px;}
.more:hover{background:#989898; border:1px solid #989898; border-radius:5px;}
a{text-decoration:none; cursor:pointer;}
.prel{position:relative; z-index:100;}
.back{background:url(../images/Prodiesel.png) no-repeat;background-color:#F4F4F5; margin-top: -7px; margin-left: -7px;}
footer{ margin:20px 0; color:#989898;}
footer hr{border:2px solid #eaeaeb; margin-bottom:10px;}footer a{color:#989898;}
.copy{width:900px; float:left; line-height:24px; text-align:center;}
.menu {width:300px; float:left; margin-top:30px;}
.content ul {float:left; padding-right:30px;}
.content ul li{list-style:none;float:left;min-width: 147px; line-height:37px; color:#757575;}
.content ul .active{list-style:url(../images/radio-active.png);}
.content .b{border-right:none !important;}
.content-1{}
.content-2{}
.content-2 select{width:200px; height:30px; border:1px solid #f0f0f0; background:#f0f0f0;}
.content-4{}
.content-3{}
.search{background:url(../images/search.png) no-repeat; width:102px; height:38px; line-height:38px; text-align:center; color:#FFF; float:right; }
.model{width:974px; text-align:center; margin:20px 0;}
.model tr th{padding:20px; color:#FFF; background:#28286c; border:1px solid #e0e0e3;}
.model tr td{border:1px solid #e0e0e3; color:#6b6b6b;}
.page{float:right;  margin-right:13%;}
.page ul li{list-style:none; display:inline-block; padding:2px; background:url(../images/page-number-bg.png); width:20px; height:18px; line-height:18px; text-align:center; color:#898989; font-size:16px;}
#search_form input[type="text"] { width: 200px !important;
padding-left: 10px;}
.mobile, .mob{display:none;}
.wd-254{width:254px;}
.mlt-40{margin-left:40px;}
.view-cart-submit{color: rgb(255, 255, 255) ! important; width: 125px; background-size: 100% auto; border:0; margin-right:45px; height: 51px; padding-top: 0px;}
.mlt-3{margin-left:3%;}
.mtp-ban{margin-top:0px;}
.mtp-ban1{margin-top:30px;}
.da-slide h2 {text-align:left !important;}
.tick{width: 32px; margin-right: 11px;float:left;margin-left: 65px;}
.td-welcome{padding-left:20px;}
td.pro{padding-left: 20px;}

@media only screen and (max-width: 1330px){
.back{background:none;}
header{width:220px; background:#fff; height:auto;}
header .logo{max-width:88%; padding-left:5px;}
nav {width: 180px;}


}
@media only screen and (max-width: 1250px){
.model{margin-top:4%;}
h2{ text-align:center !important;}
.desktop, .desk{display:none;}
.mobile-util{display:none;}
.mobile, .mob{display:block;}
button.mobile{width:10%; background:none; border:0; margin:0; padding:0; position:absolute; left:-3%; margin-top:-74px; z-index:999;}
header{display:none;}
.mobile img{width: 56px; height: 42px; left: 0;  margin-top: 10px;}
.part{ padding-top:25px;}
section{width:100% !important; margin-left:0;}
.utility-header {width:100%; border-radius: 0px !important;}
.menu { margin-top:80px;}
.tabs{width:100% !important; z-index:100;}
.model{width:100% !important;}
.contents {margin-top:7% !important;}
footer{text-align:center;}
.copy{width:100%;}
.sub_menu{padding:1% !important;}
.wd-logo{width:75%;}
.utility{padding:20px 20px 10px 75px !important;}
.search-wd{width:200px !important; padding-left:10px;}
}
@media only screen and (max-width: 991px){
.mlt-3{margin-left:0%;}
.widget{background:none; width:100%;}
.products{display:none;}
}
@media only screen and (max-width: 980px){
.product_details { margin: 1% 0px !important;}
.product_left {margin-top: 2% !important; padding-left:0% !important;}
.contents {height: 630px !important;}
.wd-254{width:20%;}
.mlt-40{margin-left:20px;}
.banner-table{margin-bottom:40px;}
.mtp-ban{margin-top:30px;}
.da-slide p {line-height:22px !important;}
.tick{margin-left: 30px;}
.partnumber{width:250px; left: 60%;}
}

@media only screen and (max-width: 840px){
.wd-logo{width:120px !important;}
.part{margin-top:-20px !important; margin-left:-5% !important;}
.view-cart-submit{margin-right:20px;}
.da-slide{width: 73% !important;}
}
@media only screen and (max-width: 800px){
.da-slide h2 {font-size:20px !important;}
.da-slide h2 {width:80%;}
}
@media only screen and (max-width: 780px){
.mlt-40{margin-left:10px !important;}
}

@media only screen and (max-width: 740px){
.respon td table tbody{overflow-y: scroll !important; display: inline-block !important;}
.respon table, .respon tbody, .respon td, .respon tr {display: block; }

/*tr { }*/

.respon td {/ Behave  like a "row" / border: none !important; position: relative !important; }

.respon td:before {/ Now like a table header / position: absolute !important; / Top/left values mimic  ding / top: 6px !important; left: 6px !important; width: 45% !important; padding-right: 10px !important; 
white-space: nowrap !important;}
}

@media only screen and (max-width: 690px){
.da-slide .da-img {display:none !important;}
.da-slide{width: 100% !important;}
.da-slide h2 {width:100% !important; top:136px !important;}
.da-slide p {width:85% !important;}
.mtp-ban1 {margin-top:0px !important;}
.mtp-ban {margin-top:0px !important;}
.part {float: left !important; padding-top:0px !important; margin-top:10px !important; margin-left:-4% !important;}
.utility {padding: 20px 20px 10px 50px !important;}
.partnumber {left:41% !important;}
}
@media only screen and (max-width: 620px){
.tablet{display:none;}
.mobile-util{display:block;}
.wd-logo {width: 40% !important; margin-left: 30%; margin-top: 40px; }
.da-slider {display:none;}
.prel{margin-top:40px;}
button.mobile {margin: -180px 0px 0px;}
.banner-table {display:none;}
.utility ul{margin-left:50px;}
.part {float: left !important; padding-top: 0px !important; margin-top: 0px !important; margin-left: 10% !important;}
.search-wd{width:320px !important; padding-left:10px;}
.tabs label {padding: 0px 10px !important;}
.product-imgs{width: 100% !important; padding-bottom: 10px;}
.product_right {width:100% !important;}
.tabs input#tab-2 {left: 133px !important;}
.tab-selector-4, .tab-selector-3, .tab-selector-2, .tab-selector-1 {width: 133px !important;}
.tabs input#tab-3 {left: 270px !important;}
.tabs input#tab-4 {left: 407px !important;}
.contents {height: auto !important; width:90% !important; padding: 1px 2px !important;}
.td-form{padding-left:0px !important;}
.contents td {width: 100% !important;}
.td-welcome{padding-left:0px !important;}
}

@media only screen and (max-width: 560px){
.model tr th, .model tr td  {font-size:13px !important;}
.tabs label  {font-size:12px !important;}
.tabs label {padding: 0px !important;}
.tabs input#tab-2 {left: 24% !important;}
.tab-selector-4, .tab-selector-3, .tab-selector-2, .tab-selector-1{width: 114px !important;}
.tabs input#tab-3 {left: 47% !important;}
.tabs input#tab-4 {left: 345px !important;}
}
@media only screen and (max-width: 475px){
.model tr th, .model tr td  {font-size:12px !important;}
.tabs label  {font-size:10px !important;}
.search-wd {width: 250px !important;}
.tabs label {width: 85px !important;}
.utility li {margin-bottom: 15px !important;}
.partnumber {left:7% !important;}
.tabs input#tab-2 {left: 18% !important;}
.tab-selector-4, .tab-selector-3, .tab-selector-2, .tab-selector-1{width: 80px !important;}
.tabs input#tab-3 {left: 36% !important;}
.tabs input#tab-4 {left: 286px !important;}
}

@media only screen and (max-width: 390px){
.utility {margin-left: 20px !important;}
button.mobile {width: 19% !important; margin: -230px 0px 0px !important;}
.tabs input#tab-2 {left: 22% !important;}
.tabs input#tab-3 {left: 45% !important;}
}
@media only screen and (max-width: 360px){
.mlt-3 {margin-top:20px !important;}
}

@media only screen and (max-width: 340px){
.mlt-3 {margin-top:35px !important;}
}