/**************************************************************
	Import Styling
**************************************************************/
@import url('reset.css');
@import url('bootstrap.min.css');
@import url('bootstrap-responsive.min.css');


/**************************************************************
	General Styling
**************************************************************/
body,html{ margin:0; padding:0; width:100%; min-height:100%; height:100%; background:url(../images/templete/bg/bg-btexture.jpg); }
h1,h2,h3,h4,h5,h6,p,li,span{ font-family:'Open Sans',serif; color:#fff;}

[class*="sec"]{ position:relative; width:100%; min-height:100%;}
.bg-overlay{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/templete/bg/bg-overlay.png); z-index:999999998;}


/**************************************************************
	Navigation Styling
**************************************************************/
h1{ position:fixed; margin:20px; z-index:999999999;}

.navigation{ 
	position:fixed; 
	top:50%; 
	margin-top:-91px; 
	z-index:999999999; 
}
.navigation ul{ margin:0; }
.navigation span{ 

	display:block; 
	position:absolute; 
	top:20px; 
	left:-22px; 
	padding:2px 5px 2px 10px; 
	font-size:12px; 
	background:#4e4e4e; 
	z-index:-1; 
}
.navigation a{

	display:block;
	position:relative;
	width:75px; 
	height:61px;
	cursor:pointer;
}
.navigation a.btn-whatwe{ background:url(../images/templete/nav/btn-whatwe.png); }
.navigation a.btn-product{ background:url(../images/templete/nav/btn-product.png); }
.navigation a.btn-contact{ background:url(../images/templete/nav/btn-contact.png); }

.navigation a.active,
.navigation a:hover{ background-position: 0 61px; }
.navigation a.btn-whatwe span{ width:70px;}


/**************************************************************
	Home Styling
**************************************************************/
.sec1 h2{

	margin:20px auto 0;
	width:486px;
	font-size:26px;
	font-weight:bold;
	text-align:center;
	line-height:35px;
	color:#fff;
}
.article-control{ margin:10px auto; text-align:center;}
.article-control ul{ display:inline-block; margin:0; height:30px; }
.article-control li{ float:left; position:relative; margin:0 10px; }
.article-control li span{ position:absolute; display:none;}
.article-control li.active a,
.article-control li:hover a{ color:#fff;  border:2px solid #ccc; }
.article-control a{ display:block; padding:2px 5px; font-size:16px; text-align:center; text-decoration:none; color:#999; border:2px solid transparent; cursor:pointer; }

.article-control .btn1 span{

	top:34px;
	left:34px;	
	width:125px;
	height:24px;
	background:url(../images/home/dotline-design.png);
}

.article-control .btn2 span{

	top:34px;
	left:32px;
	width:40px;
	height:24px;
	background:url(../images/home/dotline-assure.png);
}

.article-control .btn3 span{

	top:34px;
	right:28px;
	width:46px;
	height:24px;
	background:url(../images/home/dotline-make.png);
}

.article-control .btn4 span{

	top:34px;
	right:34px;
	width:125px;
	height:24px;
	background:url(../images/home/dotline-supply.png);
}


.circle{ position:relative; margin:30px auto 10px; width:377px; height:377px; }
.circle-line{ position:relative; margin:0; width:100%; height:100%; background:url(../images/home/circle-line.png) no-repeat; }
.circle-turn{ position:absolute; top:7px; left:7px; width:96.37%; height:96.37%; background:url(../images/home/circle-color.png) no-repeat; }
.circle-mask{ position:absolute; top:-1px; left:54px; width:71%; height:100%; background:url(../images/home/circle-mask.png) no-repeat; }
.circle-block{ position:absolute; top:61px; left:7px; width:96.37%; height:84%; background:url(../images/home/circle-block.png) no-repeat; }


.h-article{ display:none; margin:0 auto; padding:50px 20px 0; /*width:100%;*/ }
.article1{ display:block; }
.h-article h3,
.h-article p,
.h-article li{ text-align:center; }

.h-article h3{ font-size:16px; font-weight:700; }
.h-article span{ display:block; margin:0 auto; width:90px; height:1px; background:#959595; }
.h-article ul{ list-style-type:disc; list-style-position:inside; margin:10px 0 0 0; }
.h-article li{ font-size:13px; font-style:italic; }



.h-tagline{ position:relative; padding:15px 0 0; background:url(../images/templete/bg/inner-shadow.png) repeat-x; }
.h-tagline p{ display:none; margin:0 auto; padding:0 20px; font-size:16px; font-weight:300; font-style:italic; line-height:24px; text-align:center; color:#fff; }
.h-tagline p:first-child{ display:block;}

.flexslider{ width:100%; xheight:100%;}
.flexslider .slides{ margin:0; xheight:100px;}
.flexslider .flex-direction-nav{ display:none;}
.flexslider .flex-control-nav{ margin:0 0 15px; padding:0; text-align:center;}

.flex-control-nav li{ display:inline-block; margin:0 3px; cursor:pointer;}
.flex-control-nav a{ display:block; width:7px; height:7px; text-indent:-9999px; border:2px solid #808080; border-radius:100%;}
.flex-control-nav a.flex-active{ background:#808080; }

/**************************************************************
	Product Styling
**************************************************************/
.sec2{ background:none #fff;}

.h-product h2{ 

	margin:0;
	padding:45px 0 0 0;
	font-size:30px;
	color:#383838; 
	text-align:center;

}

.h-product p{ 

	margin:20px 0;
	font-size:16px;
	font-weight:700;
	font-style:italic;
	color:#a0a0a0;
	text-align:center;

}

.h-product p a{ color:#383838; cursor:pointer;}

.btn-wrapper .btn-previous{ left:0; }
.btn-wrapper .btn-next{ right:0; background-position:top right; }
.btn-wrapper .btn-previous:hover{ background-position:bottom left; }
.btn-wrapper .btn-next:hover{ background-position:bottom right;}


.product-cat ul{ margin:0; text-align:center;}
.product-cat li{ display:inline-block; }

.product-cat a{

	display:block;
	margin:0 10px;
	padding:2px 5px;
	font-size:16px;
	color:#bbb;
	border:2px solid transparent;

}

.product-cat a.active,
.product-cat a:hover{

	text-decoration:none;
	color:#333;
	border:2px solid #333;

}

.flexslider-product{

	position:relative;
	padding:20px 0 0 0 ;
	width:100%;
	background:url(../images/product/slider/slider-stage.png) no-repeat center;
	background-size:cover;

}

.flexslider-product .slides{ margin:0; width:100%; height:400px; }
.flexslider-product .slides .thumbnail{ margin:0 auto; padding:0; border:none; box-shadow:none; }

.flexslider-product ul{ margin:0;}
.flexslider-product .flex-control-nav{ margin:0; padding:53px 0 20px; text-align:center;}
.flexslider-product .flex-direction-nav a{ 

	display:block;
	position:absolute; 
	top:35%;
	margin-top:-29px;
	width:58px;
	height:58px;
	text-indent:-9999px;
	background:url(../images/product/slider/slider-sprite.png) ;
	z-index:99999;

}

.flexslider-product .flex-direction-nav a.flex-prev{ left:100px;}
.flexslider-product .flex-direction-nav a.flex-next{ right:100px; background-position:-58px 0; }
.flexslider-product .flex-direction-nav a.flex-prev:hover{ background-position:0 -58px;}
.flexslider-product .flex-direction-nav a.flex-next:hover{ background-position:-58px -58px;}

.product-description{

	position:relative;
	margin:0 auto 0;
	/*width:179px;*/
	text-align:center;


}

.product-description span{
	
	display:block;
	position:absolute;
	left:-14px;
	width:7px;
	height:14px;
	background:#f9b233;

}

.product-description h3{

	/*float:left;*/
	display:inline;
	margin:0;
	font-size:16px;
	line-height:16px;
	color:#333;
}

.product-description p{

	display:inline;
	margin:0 0 0 6px;
	font-size:12px;
	font-weight:bold;
	font-style:italic;
	color:#333;}



/**************************************************************
	Contact Styling
**************************************************************/
address{ 

	position:relative;
	margin-top:80px;
	padding-bottom:10px;
	border-bottom:1px solid #fff;
	z-index: 99999999;

}

address p{

	font-size:15px;
	font-weight:700;

}

address p span{

	font-size:12px;
	font-weight:300;
}

address a{

	font-style:italic;
	color:#fff;
	text-decoration:underline;

}

address a:hover{ color:#ccc;}

address ul{ margin:0;}
address li{

	position:relative;
	margin:10px 0 10px 30px;

}


address li span{ 

	display:inline-block;
	position:absolute;
	top:-3px;
	left:-37px;
	width:27px;
	height:27px;
	background:url(../images/templete/element/sprite-ui.png);

}

.i-fax span{ background-position:-27px 0;}
.i-email span{ background-position:-54px 0;}
.i-location span{ background-position:-81px 0;}

#form input[type="text"],
#form textarea{

	margin:5px 0;
	padding:5px 3%;
	width:94%;
	border:0;
	border-radius:0;
	resize:none;

}


#form textarea{

	height:150px;

}

#form input[type="submit"]{

	margin:5px 0;
	padding:2px 10px;
	font-size:15px;
	color:#ccc;
	border:1px solid #ccc; 
	background:#3b3b3b;
}

.google-map{

	overflow:hidden;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;

}

iframe{ width:100%; min-height:100%; }


/**************************************************************
	Mobile Styling - Navigation
**************************************************************/

header.visible-phone{ position:fixed; width:100%; padding:10px 0; background:url(../images/templete/nav/nav-mobile-bg.jpg); z-index:999999999;}
header.visible-phone h1{ position:relative; margin:0 auto; padding:0; line-height:0; z-index:9;}
header.visible-phone h1 a{ display:block; text-align:center;}
header.visible-phone h1 img{ width:34px; height:34px;}

.mobile-navigation .btn-collect{
	position:absolute;
	display:block;
	top:0;
	right:0;
	width:58px;
	height:54px;
	background:url(../images/templete/nav/nav-mobile-collect.jpg);
	z-index:999;
}

.mobile-navigation ul{ display:none; position:absolute; top:54px; margin:0; width:100%; }
.mobile-navigation li{
	margin:0;
	padding:0 18px;
	background:url(../images/templete/bg/bg-btexture.jpg); 
}

.mobile-navigation ul a{ 
	display:block;
	padding:15px 0;
	width:100%; 
	font:bold 20px 'Open Sans'; 
	text-align:center; 
	color:#999;
	
	border-bottom:1px solid #999;
	cursor:pointer;
}

.mobile-navigation a.btn-whatwe{ padding-top:30px;}
.mobile-navigation a.btn-contact{ padding-bottom:30px; border:none;}

.mobile-navigation ul a.active,
.mobile-navigation ul a:hover{ text-decoration:none; color:#fff; }


/**************************************************************
	Mobile Styling - Article
**************************************************************/

section.visible-phone img{ display:block; margin:0 auto;}
section.visible-phone .article-control{ margin-top:30px;}
section.visible-phone .h-article{ padding:25px 25px 40px;}


/**************************************************************
	Media Quries Styling
**************************************************************/
@media (max-width: 979px) and (min-width: 768px){
	
	.product-description{ position:relative; left:0;}
}

@media (max-width: 767px){

	[class*="sec"]{ padding-top:50px;}

	.row-fluid [class*="offset"]:first-child{ padding:0 10px;}

	/**************************************************************
		Product Styling
	**************************************************************/
	/*.flex-control-nav a{ width:15px; height:15px;}*/
	.flexslider-product .slides li{ margin:0;}
	.flexslider-product .flex-direction-nav a.flex-prev{ left:0;}
	.flexslider-product .flex-direction-nav a.flex-next{ right:0;}
	.product-description{ position:relative; left:0;}

	.google-map{ position:relative; bottom:0;}
	iframe{ position:relative; bottom:-5px; min-height:300px; }

}

@media (max-width: 480px){

	/**************************************************************
		Home Styling
	**************************************************************/
	.sec1 h2{ padding:0 35px; font-size:16px; line-height:25px;}
	section.visible-phone .article-control{ margin-top:10px;}
	section.visible-phone img{ width:80px;}
	.h-tagline p{ font-size:13px; line-height:18px;}
	section.visible-phone .h-article{ padding-bottom:20px;}


	/**************************************************************
		Product Styling
	**************************************************************/
	.h-product h2{ padding-top:15px;}
	.flexslider-product .slides{ height:165px; }
	.flexslider-product .flex-control-nav{ margin:214px 0 0;}
	.product-description{ margin:0 auto 0;}
}


@media (max-width: 320px){

	/**************************************************************
		Home Styling
	**************************************************************/
	.row-fluid [class*="offset"]:first-child{ padding:0 35px;}
	.article-control li{ margin:0 5px;}
	.article-control a{ font-size:13px;}
	.h-article h3{ line-height:26px;}

	.article-control .btn1 span{ left:26px; width:95px; background:url(../images/home/dotline-design320.png);}
	.article-control .btn2 span{ left:26px; width:32px; background:url(../images/home/dotline-assure320.png);}
	.article-control .btn3 span{ right:20px; width:33px; background:url(../images/home/dotline-make320.png);}
	.article-control .btn4 span{ right:24px; width:94px; background:url(../images/home/dotline-supply320.png);}

	/**************************************************************
		Product Styling
	**************************************************************/
	.product-cat a{ margin:0 5px; font-size:13px;}

	.flexslider-product{ margin:0;}
	.flexslider-product .flex-control-nav{ margin:88px 0 0;}
	.flexslider-product .slides .thumbnail{ margin:19px auto 0;}

	address{ margin-top:20px;}
}

/**************************************************************
	Poh Kit Css
**************************************************************/
.cat_btn{cursor:pointer;}
.cat_btn.active{cursor:default;pointer-events:none;}
.flexslider-product .slides.on{ opacity:filter: alpha(opacity = 50);opacity:0.5; }
.error_class{filter: alpha(opacity = 50);opacity:0.5;}