/* -------------------------------------------------------------------------------

 * HTML5/CSS3 
 * Version: 0.1
 * 
 * Website: http://www.314100.com/
 * Copyright (c) 2013 Jiashan Panoramic Technology Co.,Ltd.
 
/* -------------------------------------------------------------------------------
/* -------------------------------------------------------------------------------

    0.  Reset & Clearfix
    1.  Document Setup
    2.  Wrap
    3.  Header
    4.  Content
	5.  Footer
	6.  slider
    7.  Homepage
    8.  About
    9.  Products
    10. form
    11. search
	12. support
    13. Button 
/* 
/* ------------------------------------------------------------------------------- */
/*  0.  Reset & Clearfi
/* ------------------------------------------------------------------------------- */

    body { height:100%;font:100% Verdana, Geneva, sans-serif;color: #333; background:#fff; -webkit-text-size-adjust: none; overflow-x: hidden;}
    div, html, body, p, ul, ol, li, a, form, img, table, td, h1, h2, h3, h4, h5, h6, blockquote, header, section, footer, aside, nav, article, figure, figcaption, dl, dt, dd {margin:0;padding:0;} 
    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block;}
	audio,canvas,video { display: inline-block;  *display: inline; *zoom: 1; }
    table {border-collapse:collapse;}
    img {border:none;  -ms-interpolation-mode: bicubic;}
    ul, li {list-style:none;}
    a, a:active, a:visited {text-decoration:none;color: #333; outline: 0;}
	a:hover {text-decoration: none;color: #06F; outline: 0;}
	a:focus { outline: thin dotted;}
    input:focus, textarea:focus {outline:none;}
	
	#hidden { display:none;}

    p {	margin: 0 0 1.2em;	padding: 0; font-size:0.8em; line-height:22px; font-family: 'OpenSansRegular' !important; }

    h1, h2, h3, h4, h5, h6 { color: #444;}
    h1 { font-size: 1.8em; margin-bottom:0.67em; padding-bottom:10px;}
    h2 { font-size: 1.2em; margin-bottom:0.67em; padding-bottom:10px;}
    h3 { font-size: 1.5em; margin-bottom:0.5em; }
    h4 { font-size: 1em; margin: 1.33em 0;}
    h5 { font-size: 0.83em; margin: 1.67em 0; }
    h6 { font-size: 0.67em; margin: 2.33em 0; }
	
	.fs24 { font-size:24px;}
	.fs22 { font-size:22px;}
	.fs18 { font-size:18px; line-height:24px;}
	.fs16 { font-size:16px; line-height:24px;}
	.fs14 { font-size:14px; line-height:22px;}
	.fs12 { font-size:12px;}
	.fs11 { font-size:11px;}
	.fs10 { font-size:10px;}
	
	.fcr { color:#C00;}
	.fcb { color:#000;}
	.fcy { color:#F90;}
	.fcb { color:#06F;}
	.fcg { color:#090;}
	
	.bgcolor_fff { background:#FFF;}

	
	.ffa { font-family:'RobotoCondensed' !important,Verdana, Geneva, sans-serif;}
	.ffb { font-family:'gotham-book-webfont' !important,Verdana, Geneva, sans-serif;}
	.ffc { font-family:'RobotoLight' !important; font-weight: bold; }
	.ffd { font-family:'246D6A',Verdana, Geneva, sans-serif;}
	.ffe { font-family:Arial, Helvetica, sans-serif;}
	.ffd { font-family:Verdana, Geneva, sans-serif;}
	
	.fff { font-family:'OpenSansCondensedLight' !important;}
	.ffg { font-family:'OpenSansCondensedLightItalic' !important;}
	.ffh { font-family:'OpenSansCondensedBold' !important;}
	
	.fwb { font-weight:bold;}
	
	.text-regular { font-size:80%; line-height:20px; font-family: 'OpenSansLight' !important; }
    .text-bold { font-family: 'OpenSansRegular' !important; font-weight: 700 !important; }
    .text-extrabold { font-family: 'OpenSansSemibold' !important; font-weight: 800; }
    .text-semibold { font-family: 'OpenSansBold' !important; font-weight: 600; }
    .text-italic { font-family: 'OpenSansSemiboldItalic' !important; font-weight:800; margin:0; }


    .bord { border-bottom:1px #ccc solid;}
	
	.bord_2{ width:100%; background: url(../images/line.png) no-repeat center center; text-align:center; padding:0 0 0 0; margin-bottom:25px;}
	.bord_2 span { background:#FFF; padding:10px 20px;}
	
    .bord_line{ background: url(../images/line.png) no-repeat; margin:30px auto; width:100%; height:10px;}
	
    
    
	abbr[title] { border-bottom: 1px dotted; }
    b, strong { font-weight: bold;}
    blockquote {  margin: 1em 40px; }
	hr { -moz-box-sizing: content-box;  box-sizing: content-box;  height: 0; }
	
	small { font-size: 80%; }
    sub, sup { font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline; }
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
	
	

    .content_block:after, .footer footer:after, .wraper:after, .intro_text:after {content:'';display:block;height:0;clear:both;}

    .fl {float:left;}
    .fr {float:right;}
	
    .tac {text-align:center;}
	.tal_table {text-align: left; padding-left:15px;}
    .img_r5 {border:0px #5789bd solid; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;  behavior:url(js/PIE.htc); overflow:hidden; }
	.img_border { border:1px #5789bd solid;}
	.img_left { float:left; margin-right:20px;}
	.img100 { width:100%; height:auto;}

    .clearboth {width:100%; height:0px; line-height:0px; display:block; clear:both; overflow:hidden; font-size:0px;}
    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    .clearfix { display: inline-block; }
    .clearfix { display: block; zoom: 1; }
	

    /*  link --------------------------------*/
    .text_link a:link {color:#333; text-decoration: none; }
    .text_link a:visited {color:#333; text-decoration: none; }
    .text_link a:hover {color:#06F; text-decoration: underline; }

    .text_link_fff a:link {color:#fff; text-decoration: none; }
    .text_link_fff a:visited {color:#fff; text-decoration: none; }
    .text_link_fff a:hover {color:#FF0; text-decoration: underline; }

    .top_link a:link {color: #fff; text-decoration: none; }
    .top_link a:visited {color: #fff; text-decoration: none; }
    .top_link a:hover {color: #FF0; text-decoration: underline; }

    .bottom_link a:link {color:#757984; text-decoration: none;}
    .bottom_link a:visited {color:#757984; text-decoration:none;}
    .bottom_link a:hover {color: #FF0; text-decoration: underline;}


/* ------------------------------------------------------------------------------- */
/*  2.  Wrap
/* ------------------------------------------------------------------------------- */
    .wraper { width: 100%; max-width: 940px; margin: 0 auto; overflow: hidden;  padding:20px;}
	.main { margin-top: -100px; position: relative; z-index: 999;}
	
	.wraper_main { width: 100%; max-width: 940px; margin: 0 auto; padding:20px; margin-top:180px; position: relative; background: #FFF;  }
	.wraper_contact { width: 100%; max-width: 940px; margin: 0 auto; padding:20px; margin-top:280px; position: relative; background: #FFF; z-index:2;  }
	
	.mt15 { padding:10px 0 0 0; }
	.mt20 { margin-top:20px; }
	.mt30 { margin-top:30px; }
	.mtb25 { margin-top:25px; margin-bottom:25px;}
	.mb5 { margin-bottom:5px;}


/*  Columns  --------------------------------*/
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .full_width, .one_sixth {height:auto !important; min-height:1px; margin-right:4%; float:left; position:relative;}
	
    .full_width{margin-right:0px; float:none;}
    .one_half {width:48%;} /* width:48%;*/
    .one_third {width:30.666%;}
    .two_third {width:65.332%;}
    .one_fourth {width:22%;}
    .one_fifth {width:16.8%;}
    .two_fourth {width:48%;}
    .three_fourth {width:74%;}
    .one_sixth {width:13.333%;}
	
	
	.col-1-1,.col-1-2,.col-1-3,.col-1-4,.col-1-5, .col-1-6,.col-1-7,.col-1-8,.col-1-9,.col-1-10{height:auto !important; min-height:1px; margin-right:2%; float:left; position:relative;}
    .col-1-1{width:60px;}
    .col-1-2{width:140px;}
	
    .col-1-3{ width:23.4245%;} /* width:220px ;*/
	
    .col-1-4{width:32%; } /* width:300px;*/
	
	.col-1-5{width:40.475999%;} /*width:380px;*/
	
    .col-1-6{width:460px;}
    .col-1-7{width:57%;} /* width:540px;*/
    .col-1-8{width:66%;} /* width:620px;*/
	.col-1-9{width:700px;}
	
	.col-1-10{width:18.3%; max-width:100%;}
	
	
	
    .last {margin-right:0px !important; clear:right;}


/* ------------------------------------------------------------------------------- */
/*  3.  Header
/* ------------------------------------------------------------------------------- */

/* header  --------------------------------*/
    #header { width:980px; margin:0 auto; z-index:9999;  background:#fff; position: relative; min-height:90px;}
	
	/* header contact  --------------------------------*/	
	#header .header-contact { height:30px; background:#3f3f3f;}
		#header .site-call { color: #fff; position: absolute; top: 5px; left:10px;  }
        #header .site-call ul li { float:left; margin:0 10px; padding-left:20px;font-size:0.9em; font-family: 'OpenSansItalic' !important; }
		   .icon_phone { background: url(../images/icon_phone.png) no-repeat; background-position:left center; }
		   .icon_email{ background: url(../images/icon_email.png) no-repeat; background-position:left center; }
		
	/* header lang  --------------------------------*/	
	#header .site_lang  { position:absolute; top:8px; right:10px; }
        .lang_en, .lang_cn{ width:17px; height:12px; margin-left:8px;  display:block; float: left; text-indent:-9999px; cursor:pointer; overflow:hidden; transition: background-position 0.3s ease-in-out;	-moz-transition: background-position 0.3s ease-in-out; -webkit-transition: background-position 0.3s ease-in-out; -o-transition: background-position 0.3s ease-in-out;}
        .lang_en { background: url(../images/icon_english.png) no-repeat; background-position:0 0; }
        .lang_en:hover { background: url(../images/icon_english.png) no-repeat; background-position:0 -12px; }
        .lang_cn { background: url(../images/icon_chinese.png) no-repeat; background-position:0 0; }
        .lang_cn:hover { background: url(../images/icon_chinese.png) no-repeat; background-position:0 -12px; }

     #header .logo, #header .logo:visited { position:absolute; text-indent:-999em;cursor:pointer;background:url(../images/logo.png) no-repeat;display:block;width:240px;height:30px; top:45px;left:15px;}



/*  Navigation  --------------------------------*/
    .nav {	position: absolute; right:0; bottom:0; z-index: 100; }
    .nav li { margin: 0; padding: 0; list-style: none; float: left;  border-left:0px #ddd dotted; margin-left:1px; }
    .nav li a { font-size:1.1em; color: #000; display: block; padding:0 15px; text-decoration: none;  font-family: 'OpenSansCondensedBold',sans-serif;  height:60px; line-height:60px; text-transform: uppercase }
    .nav li a:hover { color: #fff; background:#3a8bd6; text-decoration: none; }

    #home .nav .home a,#about .nav .about a,#support .nav .support a,#contact .nav .contact a,#products .nav .products a,#gallery .nav .gallery a {color:#fff; background:#3a8bd6; }

/*  Nav desktop --------------------------------*/
    #nav{}
    /* styles for desktop */
    .tinynav { display: none }
    /* styles for mobile */

/* ------------------------------------------------------------------------------- */
/*  4.  Content
/* ------------------------------------------------------------------------------- */
   
/*  content  --------------------------------*/
    #content_full { margin: 20px auto; padding:10px 0 20px 0; width: 95%; }
    #content { margin: 20px 0 30px; padding:10px 25px 20px 25px; width: 690px; float: left; }

/*  post  --------------------------------*/
    .post { margin-bottom: 40px; }
    .post-title { padding:0 0 10px 0; margin:0 0 10px 0; border-bottom:1px #5b9297 solid;  }
    .post-title a { text-decoration: none; color: #000; }
    .post-meta { margin: 0 0 10px; font-size: 90%; }
	
	.post p { margin:0 0 15px 0; font-size:90%; line-height:24px; }

/* post image  --------------------------------*/
    .post-image { margin: 0 0 15px; }
	.post-image-left { margin: 0 20px 15px 0; float:left; }
	
	.post-image-4 { margin:0 auto; position:relative; }
    .post-image-4 ul { margin:10px 0 0 0;}
    .post-image-4 li { float:left; margin-right:2%;margin-bottom:2%;}
	
/*  sidebar  --------------------------------*/
	#sidebar { width: 210px; float: right; margin: 20px 0 0 0;}
	
	.widget { margin: 0 0 20px; padding: 10px 0; }
	.widgettitle { margin: 0 0 5px; padding: 0; background:#ff8728; height:35px; line-height:35px; color:#FFF; padding:0 0 0 15px;  }

	.widget ul { margin: 0; padding: 0;}
	.widget li { margin: 0;  list-style: none; clear: both; border-bottom: solid 1px #cccccc; }
	.widget li a{ display:block;text-decoration: none;padding: 6px 0 6px 10px; }
    .widget li a:link { color:#333; font-size:80%; display:block; }
	.widget li a:visited { color:#333; font-size:80%; }
	.widget li a:hover { background:#b0e3e7; color: #000;}
	
	.widget .right_nav_click a:link{ background:#b0e3e7; color: #000; text-decoration: none; display:block; cursor:default;}

/*  sidebar contact  --------------------------------*/
	.right_contacts { margin: 0; padding: 0; }
	.right_contacts_title { margin: 0 0 5px; padding: 0; height:35px; line-height:35px; color:#393939; padding:0 0 0 15px;  border-bottom: solid 1px #cccccc; }
	.right_contacts ul { list-style-type:none; padding:10px; }
	.right_contacts li { height:30px; line-height:30px;list-style-type:none; color:#444444; padding:0 0 0 30px; }
	.right_contacts li a:link {color: #444444; text-decoration: none; }
	.right_contacts li a:visited {color: #444444; text-decoration:none;}
	.right_contacts li a:hover { color: #06F; text-decoration: underline;}

	.right_contacts .icon_mob { background:url(../images/icon_mob.png) no-repeat left center;}
	.right_contacts .icon_phone { background:url(../images/icon_phone.png) no-repeat left center;}
	.right_contacts .icon_fax { background:url(../images/icon_fax.png) no-repeat left center;}
	.right_contacts .icon_mail { background:url(../images/icon_mail2.png) no-repeat left center;}


/*  Back to Top  --------------------------------*/
    #back_top a { background: #ccc url(../images/back_top.png) no-repeat 50% 50%; bottom: 30px; display: block; height: 40px; position: fixed; right: 30px; width: 40px; z-index: 9999; }
    #back_top a:hover { background:#00447e url(../images/back_top.png) no-repeat 50% 50%; }
	
	/*  Black & White Wrapper  --------------------------------*/
    .bwWrapper {position:relative;display:block;}
    .bwWrapper canvas { margin-left: auto; margin-right: auto;  right: 0; z-index: 9999; }


/* ------------------------------------------------------------------------------- */
/*  5.  Footer
/* ------------------------------------------------------------------------------- */
    footer { width:100%; border-top:1px #cecece solid; background:#e1e1e1; margin:25px 0 0 0; overflow:hidden; height:50px; position:relative; }
/*  copyright  --------------------------------*/
    .copyright { width:940px; margin:15px auto;}
    .copyright p { font-size:70%; padding:0; color:#363636; font-family: 'Open Sans';  font-style: normal;  font-weight: 400; }
    .copyright p a, .copyright p a:visited {color:#363636;}
    .copyright p a:hover {color: #06F; text-decoration:underline;}
	
	.copyright .foot_nav{ float:left;}
	.copyright .foot_reat { float:right;}

/* ------------------------------------------------------------------------------- */
/*  6. slider
/* ------------------------------------------------------------------------------- */
   #fwslider { position: relative;  background:#FFF;  width:100%; margin-top:-90px; }
   #fwslider .slider_container { }
   #fwslider .slide {  display: none; position: absolute;  top:0; left:0;  z-index: 0;  width:100%; }
   #fwslider .slide img {  width:100%; }
   #fwslider .slidePrev { background:#000;  width:50px; height:50px;  position: absolute; top:50%;  left:-50px;  opacity:0.5;  z-index: 10; display:none; }
   #fwslider .slidePrev span { background-image:url("../images/big-carousel-prev.png");  width:50px;  height:50px;  float:left; background-position: 50% 50%; background-repeat: no-repeat;  cursor: pointer; }
   #fwslider .slideNext { background:#000; width:50px;  height:50px;  position: absolute; top:50%; right:-50px; opacity:0.5; z-index: 10; display:none;}
   #fwslider .slideNext span { background-image:url("../images/big-carousel-next.png"); width:50px; height:50px; float:left; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; }
   #fwslider .timers {  height:4px;  position: absolute; bottom:15px; right:0; z-index: 3; }
   #fwslider .timer {  height:4px; width:40px; background-color: #000;  float:left;  margin-right: 10px; }
   #fwslider .progress {  height:4px; width:0%; background-color: #FC3; float:left; }

   #fwslider .slide_content { top:0; left:0; position: absolute;  width:100%; height:100%; }
   #fwslider .slide_content_wrap { max-width:960px; margin:15% auto; }
   #fwslider .title { opacity: 0; color:#fff; font-size:180%; padding:10px;  margin: 5px 0; float:left; font-family: 'RobotoCondensed' !important;  font-weight:lighter; }
   #fwslider .description { opacity: 0; color:#fff; font-size:16px; padding:10px; clear:both; float:left; margin-top:2px; line-height:24px; font-style: normal; font-weight: 400; font-family: 'OpenSansRegular' !important;}
   #fwslider .readmore { font-size:75%; opacity: 0; clear:both; float:left;  color:#919191; background:#000; padding:10px; text-decoration: none; margin-top:2px; font-family: Verdana, Geneva, sans-serif; font-weight:800; display:none;}
   #fwslider .readmore:hover { color:#fff; }
   
   #fwslider .fwslider_bgcolor1{ background:#0b6fce;}
   #fwslider .fwslider_bgcolor2 { background:#FC0;}
   #fwslider .fwslider_bgcolor3 { background:#000;}


@media only screen and (min-width:720px) and (max-width: 1300px) {
    .main { margin-top: -50px; }
    #fwslider .slide_content_wrap { margin-left:50px; margin-top:15%;}
    #fwslider .title { font-size:120%; }
    #fwslider .description {  font-size:100%;}

}

/* ------------------------------- 5. Media Query Max Width 719 ------------------------------- */

@media only screen and (max-width:768px) {
	
    #fwslider .slide_content_wrap { display:none; }
    #fwslider .timers { display:none; }
    #fwslider .slide_content {cursor: pointer;}

}


/*  slider background --------------------------------*/
    .full_about { background:#fff  url(../images/sub_about.jpg) no-repeat top center; }
    .full_support { background:#fff  url(../images/sub_support.jpg) no-repeat top center;}
    .full_products { background:#fff url(../images/sub_products.jpg) no-repeat top center;}
	.full_gallery { background:#fff url(../images/sub_gallery.jpg) no-repeat top center;;}

    .full_line { width:100%; height:10px; background: url(../images/line_bg_1.png) repeat-x; overflow:hidden;}
	

/* ------------------------------------------------------------------------------- */
/*  7. Home page
/* ------------------------------------------------------------------------------- */

/*  home_info --------------------------------*/
   .home_info_img { float:left;  }
   .home_info_main { float:right; width:220px;}
   
   .home_info_bg { background:url(../images/index_iso.gif) no-repeat 330px 0;}


/* index_main */
.index_main { width:100%; margin:20px auto;}
  		/**
		* Carousel with image and text (horizontal)
		**/
		#carousel-image-text-horizontal {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
		#carousel-image-text-horizontal .touchcarousel-item {
			width: 220px;
			height: auto;
			margin-right: 20px;
			padding: 0px;
			position: relative;
		}
		#carousel-image-text-horizontal img, 
		#carousel-image-text-horizontal h4,
		#carousel-image-text-horizontal p {
			margin: 0;
			padding: 0;	
			border: 0;			
		}		
		#carousel-image-text-horizontal img {			
			width: 220px;
			height: 165px;
		    border:0px #CCC solid;
			margin-bottom:10px;
		}

		#carousel-image-text-horizontal p {
			 font-size:80%; line-height:20px; font-family: 'OpenSansRegular' !important;
			 color: #555;
			 text-align:center;
		}
		

/* ------------------------------------------------------------------------------- */
/*  8. about page
/* ------------------------------------------------------------------------------- */

    .one_two, .one_three{height:auto !important; min-height:1px; margin-right:2%; float:left; position:relative;}
    .one_two {width:45%;} /* width:48%;*/
	
	.one_three {width:28%;} /* width:48%;*/

/* about --------------------------------*/
   .about_img { float:left;  }
   .about_main { float:right; width:240px;}

   .border_show{  border: 1px solid #fff; padding:15px; }
   .border_show:hover{ border: 1px solid #156a6f; box-shadow: 0px 0px 5px #156a6f; -moz-box-shadow: 0px 0px 5px #156a6f;  -webkit-box-shadow: 0px 0px 5px #156a6f; }
	
/* ------------------------------------------------------------------------------- */
/*  9. products
/* ------------------------------------------------------------------------------- */

/* products list  --------------------------------*/
     #et_wap_768 { display:none;}
	
    /* production --------------------------------*/
	.process { margin-bottom:2%; text-align:center; }
	
	
	

/* products show ol li  --------------------------------*/
   .products_feature { margin:0;}
   .products_feature ol { margin:0; list-style-type:decimal;}
   .products_feature li{ list-style-type:decimal; margin:0 0 10px 20px; font-size:0.8em; line-height:20px; font-family: 'OpenSansRegular' !important; }


/* tab  --------------------------------*/
	.tabs-wrapper { width:940px; margin:20px auto;}
	.tab-item { clear:both; overflow:hidden; padding:15px 0; border-bottom:1px solid #fff; }
	.tabs-container { float:left; position:relative; display:block; width:100%; }
	
	.tabs-wrapper .tab-content { background:#fff;  padding:20px 0; height:auto;  border-top: 1px solid #ccc; width:940px;  }
	
    ul.tabs { float: left;  height: 34px;  width:940px;  padding-left: 0 !important;  margin-bottom: 0 !important; }
	.tabs-container p:last-child { margin-bottom:0; }
	ul.tabs li { float: left;  padding-left: 0 !important;  overflow: hidden;  padding-bottom: 0;  position: relative;  text-align:center; outline:none; }
	ul.tabs li a { 	height: 34px;  line-height: 34px;  text-decoration:none;  font-size:.80em;  display: block;  padding: 0 20px;  outline:none; border-right:0px solid #ccc; color:#666; border-left:0px solid #ccc;border-top:0px solid #ccc; font-family: 'OpenSansRegular' !important;}
	ul.tabs li:last-child { }
	ul.tabs li a:hover { color:#323232; }
	ul.tabs li.active { top:-2px; _top:0px; border-bottom:1px #FFF solid; }
	ul.tabs li.active a { border-left: 1px solid #ccc;	border-right: 1px solid #ccc; border-bottom: 1px solid #fff; color:#323232; border-top: 2px solid #3a8bd6; background:#FFF; }
	ul.tabs li.active { z-index: 1; }
	ul.tabs li.active, ul.tabs li.active a:hover  { background:#fff; color:#333; font-weight:600; }

/* table --------------------------------*/
	.table_sum { width:100%; border-collapse:collapse; margin:0 auto; text-align:center; position:relative;    }
	.table_sum caption{ text-align:left; padding:0 0 10px 15px;  font-size:1.2em; color:#333; font-family:'OpenSansCondensedBold'; }
	.table_sum caption span{ font-size:10px; position: absolute; right:10px;    }
	.table_sum thead th{ border:1px solid #ccc; background:#efefef; border-bottom: 1px solid #CDCDCD;  height:30px; font-weight:bold;font-size:.7em; }
	.table_sum td{ border:1px solid #ccc; font-weight:normal; color:#727c95; color:#333; padding:8px 0;font-size:.7em;}
	.table_sum tr:nth-child(2n) { background: #efefef;}
	.table_sum td:nth-child(1) { text-align:left; padding:8px 15px; }
    .table_sum tr:hover{ background: #CEE3FF; }

	
	.table_text { width:100%; border-collapse:collapse; margin:0 auto; position:relative;    }
	.table_text caption{ text-align:left; padding:0 0 10px 15px;  font-size:1.2em; color:#333; font-family:'OpenSansCondensedBold'; }
	.table_text caption span{ font-size:10px; position: absolute; right:10px;    }
	.table_text thead th{ border:1px solid #ccc; background:#efefef; border-bottom: 1px solid #CDCDCD;  height:30px; font-weight:bold;font-size:.7em;  text-align:center;}
	.table_text td{ border:1px solid #ccc; font-weight:normal; color:#727c95; color:#333; padding:8px 15px;font-size:.7em; text-align:left;}
	.table_text tr:nth-child(2n) { background: #efefef;}
    .table_text tr:hover{ background: #CEE3FF; }




/* gallery --------------------------------*/
    ul.imageHolder{ list-style:none; padding:0; margin:0; }
    ul.imageHolder li{ float:left; margin-right:15px; margin-bottom:12px; text-align:center; }
    ul.imageHolder li:hover{ border-color:#8DCBE0; }
    ul.imageHolder li a{ width:220px; height:180px; display:block; }
    ul.imageHolder li img{ width:220px; height:180px; }

    .clearfix { *zoom: 1; }
    .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }
    .clearfix:after { clear: both; }

/* ------------------------------------------------------------------------------- */
/*  9. support
/* ------------------------------------------------------------------------------- */
.faq_list {padding:0 0 50px 0;}
.faq_list h4.bord {margin:0;}
.faq_list .filter {float:left;width:100%;border-bottom:1px solid #efefef;margin:10px 0 50px 0;}
.faq_list .filter li {float:left;padding-right:2px;}
.faq_list .filter li a {color:#7e7e7e;background:#efefef;padding:5px 10px;display:block;}
.faq_list .filter li a:hover {background:#e4e2e2;color:#626363;}
.faq_list .filter li.active a, .faq_list .filter li span {color:#fff;background:#C00;padding:5px 10px;display:block;}

.faq_list #faq {clear:both;}
.faq_list #faq li {position:relative;}
.faq_list #faq li:before {content:'';z-index:2;cursor:pointer;display:block;width:24px;height:24px;position:absolute;top:14px;right:18px;background:url(../images/closed.png) no-repeat;}
.faq_list #faq li.simpleFAQShowing:before {background:#5eafcd url(../images/open.png) no-repeat;-webkit-border-radius:13px;-moz-border-radius:13px;border-radius:13px;behavior: url(../js/PIE.htc);}

.faq_list #faq .question {margin:20px 0 0 0;border:1px solid #d3d3d3;min-height:34px;position:relative;padding:13px 0 0 55px;font-size:100%;color:#434242;background:#ededed;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f9f9f9), to(#ededed));background: -webkit-linear-gradient(#f9f9f9, #ededed);background: -moz-linear-gradient(#f9f9f9, #ededed);background: -ms-linear-gradient(#f9f9f9, #ededed);background: -o-linear-gradient(#f9f9f9, #ededed);background: linear-gradient(#f9f9f9, #ededed);-pie-background: linear-gradient(#f9f9f9, #ededed);behavior: url(../js/PIE.htc); font-family:'OpenSansLight' !important; font-weight:600;}

.faq_list #faq .question:before {content:'Q:';position:absolute;top:8px;left:16px;color:#cccbcb;font-size:22px;font-weight:bold;}

.faq_list #faq .answer { border:1px solid #e7e7e7;position:relative;border-top:none;padding:27px 35px 27px 55px;}
.faq_list #faq .answer:before {content:'A:';position:absolute;top:27px;left:16px;color:#cccbcb;font-size:22px;font-weight:bold;}
.faq_list #faq .answer h5 { font-size:100%; font-family: 'OpenSansRegular' !important; margin:0; padding-bottom:15px;}
.faq_list #faq .answer p { padding-bottom:5px; font-family: 'OpenSansRegular' !important; font-size:85%; }

/* map --------------------------------*/
	#map { position:absolute; top:0; left:0; width:100%; height:400px; z-index:1;}


/* pager_nav  --------------------------------*/
   .pager_nav {font-weight:bold;margin:0 0 0 10px;clear:both;padding-top:3px;position:relative; font-size:12px;}
   .pager_nav a {color:#999;margin:0 5px 0 2px;}
   .pager_nav a:hover, .pager_nav span {color: #06F;margin:0 5px 0 2px;}
   .pager_nav .bx-prev, .pager_nav .bx-next {margin:0 10px 0 0;display:block;float:left;width:20px;height:20px;position:absolute;right:20px;top:0;font-size:0;line-height:0;background:url(../images/bg_direction_nav.png) 0 0 no-repeat;cursor:pointer;}
   .pager_nav .bx-next {background-position:100% 0;right:0;}
   .pager_nav .bx-next:hover {background-position: 100% -20px;margin:0 10px 0 0;}
   .pager_nav .bx-prev:hover {background-position:0 -20px;margin:0 10px 0 0;}
	
	

/* ------------------------------------------------------------------------------- */
/*  10.  form
/* ------------------------------------------------------------------------------- */

	.form { width:80%; margin:0 auto;}
	.form h1 { font-size:18px; margin:15px 0 5px 25px; }
	
	.form .input-box { margin-bottom: 15px; position: relative; padding:0 0 0 20px; }

	.form .input-box label { display: block; font-size: 85%; margin-bottom: 2px;color: #333;}
		.form .input-box.invalid label {color: red;	font-weight: bold;}
		.form .input-box.check label {	display: inline; }
	
	.form .input-box input[type=text], .form .input-box textarea { width: 90%; padding: 8px 5px; font-size: 85%; background-color: #fff; border:1px #CCC solid;
	    -moz-border-radius: 0px;
		border-radius: 0px;
		-moz-box-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
		-webkit-box-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
		box-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
	}
	
		.form .input-box input[type=text]:focus , .form .input-box textarea:focus { background:#EEF8FF; border:1px #AFE3FC solid;}
		
		.form .input-box.invalid input[type=text], .form .input-box.invalid textarea {
			-moz-box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
			-webkit-box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
			box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
			border:1px #B7D3FB  solid;
		}
		
	.form .input-box select { width: 90%; padding: 5px 5px; font-size:85% ; background-color: #fff; border:1px #ccc solid;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
		-webkit-box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
		box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
	}
	
	.form .input-box .label { position: absolute; top: 12px; -moz-top: 8px; left: 10px; color: #ccc;  padding:0 0 0 20px; font-size:75%;}
	
		.mozilla .form .input-box .label { top: 6px; }
	
	.form .input-box .check { display: none; width: 20px; height: 17px; margin-top: 8px; float: right; }
	
		.form .input-box.invalid .check { display: block; background-image: url(../images/invalid.png); background-repeat: no-repeat; }
		.form .input-box.valid .check { display: block; background-image: url(../images/valid.png); background-repeat: no-repeat; }
		.form .input-box.check .check { margin-top: 0px; }

	.form .input-box .error { display: none; font-size:75%; font-style: italic; color: #444; 	margin-top: 2px; }

		.form .input-box.invalid .error { display: block; }

	.form .input-box input[type=submit] { padding: 5px 10px; font-size: 12px; background-color:#06F; border:1px #06F solid; color:#FFF;
	    -moz-border-radius: 0px;
		border-radius: 0px;
		-moz-box-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
		-webkit-box-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
		 box-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
	}
	
	.form .input-box input[type=submit]:hover { background-color:#000; border:1px #000 solid; color:#FFF;
		-moz-box-shadow: 0 0 5px rgba( 0, 0, 0, .4 );
		-webkit-box-shadow: 0 0 5px rgba( 0, 0, 0, .4 );
		box-shadow: 0 0 5px rgba( 0, 0, 0, .4 );
		cursor: pointer;
	}


   
	
/*  Contact info  --------------------------------*/

    .contact_info ul {margin:0 0 30px 0; border-bottom:0px #ccc solid; padding:0 0 0 0;}
	.contact_info li { margin-bottom:10px;display:block; font-size:90%;}
	.contact_info p { margin-bottom:10px;   }

	
/*  Contact form  --------------------------------*/
    .contact_us { float:right;width:450px;padding:10px;  margin:20px 0 0 0;}
    .form { width:100%;}


/* ------------------------------------------------------------------------------- */
/*  14. HoverEx
/* ------------------------------------------------------------------------------- */

.tpl2 .bg { background: url(../images/bg_color.png) repeat;  width:100%; height:100%; }
.tpl2 .center-bar { height:32px; position:absolute; top:50%; margin-top:-16px; text-align:center; width:100%; }
.tpl2 .center-bar a { display:inline-block; width:48px; height:48px; margin:0 3px; }

.tpl2 .img_zoom { background: url(../images/icon_png_zoom.png) no-repeat center center; }
.tpl2 a.img_zoom:hover { background:url(../images/icon_png_zoom.png) no-repeat center center; }

.tpl2 .img_pdf { background: url(../images/icon_png_pdf.png) no-repeat center center; }
.tpl2 a.img_pdf:hover { background:url(../images/icon_png_pdf.png) no-repeat center center; }

.tpl2 .img_link { background: url(../images/icon_png_link.png) no-repeat center center; }
.tpl2 a.img_link:hover { background:url(../images/icon_png_link_over.png) no-repeat center center; }

/* ------------------------------------------------------------------------------- */
/*  14.resp tab
/* ------------------------------------------------------------------------------- */

ul.resp-tabs-list, p { margin: 0px; padding: 0px; }
.resp-tabs-list li { font-weight: 600; font-size: 12px; display: inline-block;  padding: 13px 15px;  margin: 0; list-style: none; cursor: pointer;  float: left;  font-family: 'OpenSansRegular' !important;}
.resp-tabs-container { padding: 0px; background-color: #fff; clear: left; }
h2.resp-accordion { cursor: pointer; padding: 5px; display: none; }
.resp-tab-content { display: none; padding: 15px; }

.resp-tab-active { border: 1px solid #c1c1c1;  border-top: 2px solid #09F;  border-bottom: none; margin-bottom: -1px !important; padding: 12px 14px 14px 14px !important; }

.resp-tab-active { border-bottom: none; background-color: #fff; }
.resp-content-active, .resp-accordion-active { display: block; }

.resp-tab-content { border: 1px solid #c1c1c1; }
h2.resp-accordion { font-size: 12px; border: 1px solid #c1c1c1; border-top: 0px solid #c1c1c1;  margin: 0px; padding:15px; }
h2.resp-tab-active { border-bottom: 0px solid #c1c1c1 !important;  margin-bottom: 0px !important; padding: 10px 15px !important; }
h2.resp-tab-title:last-child { border-bottom: 12px solid #c1c1c1 !important;  background: blue; }


/*-----------Accordion styles-----------*/
h2.resp-tab-active { background: #DBDBDB !important; }
.resp-easy-accordion  h2.resp-accordion { display: block; }
.resp-easy-accordion .resp-tab-content { border: 1px solid #c1c1c1; }
.resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; }
.resp-jfit { width: 100%; margin: 0px; }
.resp-tab-content-active { display: block; }
h2.resp-accordion:first-child { border-top: 1px solid #c1c1c1 !important; }

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
    ul.resp-tabs-list { display: none; }
    h2.resp-accordion { display: block; }
    .resp-vtabs .resp-tab-content { border: 1px solid #C1C1C1; }
    .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; }
    .resp-accordion-closed { display:none !important; }
    .resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important;}
}




/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */

tr:hover{ background: #CEE3FF; }

th { 
  background:#efefef;
  font-weight: bold; text-align:center; padding: 6px; 
  border: 1px solid #ccc; 
  color:#333;
  font-size:12px;
}
td { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
  color:#333;
  font-size:11px;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr, caption { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #fff; margin-bottom:25px; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 30%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left:10px;
		width: 20%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.table-1 td:nth-of-type(1):before { content: "type"; font-weight:bold; }
	.table-1 td:nth-of-type(2):before { content: "JDB-1";font-weight:bold; }
	.table-1 td:nth-of-type(3):before { content: "JDB-2"; font-weight:bold;}
	.table-1 td:nth-of-type(4):before { content: "JDB-2"; font-weight:bold;}
	.table-1 td:nth-of-type(5):before { content: "JDB-2"; font-weight:bold;}
	.table-1 td:nth-of-type(6):before { content: "JDB-3"; font-weight:bold;}
	.table-1 td:nth-of-type(7):before { content: "JDB-4"; font-weight:bold;}
	.table-1 td:nth-of-type(8):before { content: "JDB-5"; font-weight:bold;}
	
	
	.table-2 td:nth-of-type(1):before { content: "Grade"; font-weight:bold; }
	.table-2 td:nth-of-type(2):before { content: "Unit"; font-weight:bold; }
	.table-2 td:nth-of-type(3):before { content: "JDB-1";font-weight:bold; }
	.table-2 td:nth-of-type(4):before { content: "JDB-2"; font-weight:bold;}
	.table-2 td:nth-of-type(5):before { content: "JDB-22"; font-weight:bold;}
	.table-2 td:nth-of-type(6):before { content: "JDB-23"; font-weight:bold;}
	.table-2 td:nth-of-type(7):before { content: "JDB-24"; font-weight:bold;}
	.table-2 td:nth-of-type(8):before { content: "JDB-25"; font-weight:bold;}
	.table-2 td:nth-of-type(9):before { content: "JDB-15"; font-weight:bold;}
	
	.table-3 td:nth-of-type(1):before { content: "Lubricant"; font-weight:bold; }
	.table-3 td:nth-of-type(2):before { content: "Features"; font-weight:bold; }
	.table-3 td:nth-of-type(3):before { content: "Application";font-weight:bold; }