/* CSS Document */

body {
	font:0px Arial, Helvetica, sans-serif;
	color:#AAFFD5;
	height:78px;
	width: 1028px;
	padding-bottom: 0px;
	margin:0px 0px 0px 5px;
	padding:0px 0px 0px 5px;
}

.left-body
{
width:100px;
height:70%;
float:left;
}

.right-body
{
width:171px;
height:78px;
float:right
}

.right-body img
{
width:100%;
height:100%;
float:left;
}

#container {
	width:680px;
	margin:0px auto;
}

.indexheader {
	background: url(../images/header.jpg);
	background-size: 100%;
	height:78px;
	width: 100.5%;
	padding-bottom: 0px;
}

h2
{
	display: inline-block;
	font-size: 18px;
	color: white;
	font-weight: bold;
	margin-bottom: 0px;

}

h2.judul
{
	display: inline-block;
	font-size: 18px;
	color: #2929CC;
	margin-top: 10px;
	margin-left: 5px;
	font-weight: bold;
}


img.judul
{
	max-width:25px;
	border-radius:50%;
	margin-left: 5px;
}

.webpanel {
	background:white;
	padding:0px;
	padding-top:0px;
	margin: 0px -3px 0px 0px;
}

.banner {
	background:url(../images/gambar1.jpg);
	background-size: cover;
	height:318px;
}

/*****************awal slide-show*****************/
<!--
.style4 
{
font-family: "Times New Roman";
font-weight:bold;
color: #FFFFFF; 
text-decoration:none;

padding-left:5px;
 
}

.style5 {
	font-family: "Arial Rounded MT Bold";
	font-size: 9px;
	font-weight: bold;
	
	
}
.style6 {font-size: 12px}
.style7 {font-size: 9px; }
.style8 {color: #FF0000}
.style9 {
	color: #FFFFFF;
	font-size: 9px;
}
.style10 {color: #FFFFFF}
-->

#slideshow {
    position:relative;
    height:318px;
	width:100%;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height:318px;
	width:100%;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
    height:318px;
	width:100%;
}

#slideshow IMG.last-active {
    z-index:9;
    height:318px;
	width:100%;
}
/******************** akhir slide-show******************************/    

.workzone {
	padding:5px 0px 0px 0px;
	text-align:justify;
}

.column1 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.subbanner1 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbanner1 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 
}

.column2 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 2px;
}

.subbanner2 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbanner2 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}

.column3 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 2px;
}

.subbanner3 a img {
	
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbanner3 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}


}

.subbanner {
	text-align:center;
	margin-bottom:20px;
}

.more {
	padding:10px 0px 0px 0px;
	text-align:right;
}

.contactzone {
	height:140px;
	background-color:fixed;
	border:4px;
	margin-top:7px;
}

.contact-left1 {
	width:150px;
	float: left;
	padding:60px 10px 0px 10px;
}
.contact-left2{
	width:160px;
	float:left;
	padding: 0px 0px 0px 0px;
}

.contact-left3 {
	width: 40%;
	float: left;
	padding-bottom: 0px 0px 0px 0px;
}

.contact-left4 {
	width:50px;
	float: left;
	padding-bottom: 0px 0px 0px 0px;
}


.contact-right {
	width:250px;
	float:left;
	padding: 10px 25px 5px 0px;
	color: white;
	text-decoration: none;	
	/*line-height: 1.5;*/
}

.contact-sosmed {
	width:250px;
	float: right;
	padding: 20px 0px 20px 0px;
	color: white;
}
.section_fb_twitter a {
	display: inline-block;
	width: 200px;
	padding: 20px 0 0 0;
	font-size: 16px;
	font-weight: bold;
	color: #37362f;	
	margin-left: 30px;
}

.section_fb_twitter a:hover {
	color: #FF6600;
	text-decoration: none;	
}

.section_fb_twitter a span {
	font-size: 12px;
	margin-top: 5px;
	display: block;
	letter-spacing: 5px;
}

.fb a {
	background: url(../images/facebook.png) right bottom no-repeat;
	background-size: 40px;
}

.twitter a {
	background: url(../images/twitter_icon.png) right bottom no-repeat;
	background-size: 40px;
	margin-top: -20px;
}

.left-footer
{
width:100px;
height:142%;
float:left;
}
.left-footer img
{
width:172%;
height:165%;
margin:-183px 0px 0px 2px;
float:left;
}

.footer {
	padding:18px 0px 0px 0px;
	background-image:url(../images/footer.jpg);
	margin:0px 0px 0px 0px;
	height:165px;
}

.right-footer
{
width:100px;
height:111px;
float:right
}

.right-footer img
{
width:172%;
height:165%;
margin:-183px 0px 0px -75px;
float:left;
}

.clear {
	clear:both;
	margin:0px;
	padding:0px;
}

h1 {
	font:20px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	color:blue;
	margin:10px 5px -10px 5px;
	padding:0px;
	font-weight: bold;
}

h3 {
	font:12px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	color:blue;
	font-weight: bold;
	padding: 0 auto;
}

h4 a {
	font:14px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	color:white;
	font-weight: bold;
	text-decoration: none;
	line-height: 0.3;
	word-spacing:1;
}

.whiteheading {
	font:20px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	color:#ffffff;
	margin:0px;
	padding:0px;
}

.browntxt {
	color:#3B392F;
	font-weight:bold;
}

.redtxt {
	color:#CB6040;
	font-weight:bold;
}

a {
	color:#000000;
	text-decoration:underline;
}

a:hover {
	color:red;
	text-decoration:none;
}

*.menuzone {
	padding-top:51px;
	text-decoration:none;
}

.mainmenu {
	padding:10px 0px 10px 0px;
	float:right;
	/*text-align: center;*/
}

.mainmenu ul {
	margin:0px 0px 0px 0px;
	padding:4px 0px 0px 4px;
	text-decoration:none;
}

.mainmenu li {
	display:inline;
	padding:35px 25px 10px 25px;
	border-right:0px solid black;
	text-decoration:none;
}

.mainmenu li a{
	font:10px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
	background:50% 0% no-repeat;
	background-size: 30%;
	padding: 0px 0px 0px 0px;
	text-decoration:none;
}

.mainmenu li a:hover {
	text-decoration:none;
}*/

.servicelink {
	padding:21px 0px 0px 0px;
}
div.lightgreenheading{color:black;
					font-size:18px;
					}

.servicelink ul {
	margin:0px;
	padding:0px;
}

.servicelink li {
	display:block;
	background:0px 5px no-repeat;
	list-style:none;
	padding:0px 0px 5px 13px;
}

.servicelink li a{
	color:#CCC9B7;
	text-decoration:underline;
}

.servicelink li a:hover {
	color:#cccccc;
	text-decoration:none;
}

.footerlink {
	padding:0px 0px 0px 0px;
	color: white;
	text-align: center;
}

}

h5 {
	font:bold 15px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	color:#3B392F;
	padding:0px 0px 5px 0px;
	border-bottom:1px dotted #3B392F;
	margin:0px 0px 10px 0px;
}


h6 {
	font:bold 15px ZapfHumnst BT, Arial, Helvetica, sans-serif;
	color:#3B392F;
	padding:0px 0px 5px 0px;
	margin:0px 0px 10px 0px;
}

img.email {
	width: 9%;	
}
img.email2 {
	width: 9%;	
}
.ourvalue {
	margin:10px 0px 0px 0px;
}


/******************* awal about-us */
.aboutus {
	background:url(../images/about-us.jpg);
	background-size: cover;
	height:318px;
}
.columnaboutus1 {
	width:460px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.columnaboutus3 {
	width:219px;
	float:left;
	margin:-316px 0px 0px 464px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 2px;
}

.subbanneraboutus3 a img {
	
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbanneraboutus3 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}
.panahaboutus {
	width:10px;
	height:0px;
	float:left;
	margin:-7px 0px 0px 385px;
	background:white;
}

/************* akhir about-us**/

/******************* awal history */
.history {
	background:url(../images/history.jpg);
	background-size: cover;
	height:318px;
}
.columnhistory1 {
	width:460px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.columnhistory3 {
	width:219px;
	float:left;
	margin:-190px 0px 0px 462px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 2px;
}

.subbannerhistory3 a img {
	
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerhistory3 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}
.panahhistory {
	width:10px;
	float:left;
	margin:-7px 0px 0px 435px;
	background:white;
}

/************* akhir history**/
/******************* awal product */
.product {
	background:url(../images/product.jpg);
	background-size: cover;
	height:318px;
}
.columnproduct1 {
	width:223px;
	float:left;
	margin:0px 0px 0px -40px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.subbannerproduct1 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct1 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 
}

.columnproduct2 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 3px;
}

.subbannerproduct2 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct2 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}

.columnproduct3 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 3px;
}

.subbannerproduct3 a img {
	
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct3 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}
.columnproduct4 {
	width:223px;
	float:left;
	margin:0px 0px 0px -40px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.subbannerproduct4 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct4 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 
}

.columnproduct5 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 3px;
}

.subbannerproduct5 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct5 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}

.columnproduct6 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 3px;
}

.subbannerproduct6 a img {
	
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct6 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}
.columnproduct7 {
	width:223px;
	float:left;
	margin:0px 0px 0px -40px;
	background:white;
	border-top:0px solid white;
	padding:6px 2px 0px 0px;
}

.subbannerproduct7 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct7 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 
}

.columnproduct8 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:6px 2px 0px 3px;
}

.subbannerproduct8 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct8 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}

.columnproduct9 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:6px 0px 0px 3px;
}

.subbannerproduct9 a img {
	
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerproduct9 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}
.panahproduct {
	width:10px;
	float:left;
	margin:-7px 0px 0px 485px;
	background:white;
}


/************* akhir product**/
/******************* awal service */
.service {
	background:url(../images/service.jpg);
	background-size: cover;
	height:318px;
}
.columnservice1 {
	width:460px;
	float:left;
	margin:0px 0px 0px 0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.columnservice3 {
	width:219px;
	float:left;
	margin:-145px 0px 0px 462px;
	background:white;
	border-top:0px solid white;
	padding:45px 0px 0px 2px;
}

.subbannerservice3 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannerservice3 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}

.columnservice4 {
	width:226px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.columnservice5 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 2px;
}

.columnservice6 {
	width:222px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 3px;
}

.columnservice7 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:6px 2px 5px 0px;
}

.columnservice8 {
	width:223px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:5px 2px 0px 4px;
}

.columnservice9 {
	width:222px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:5px 0px 0px 4px;
}
.panahservice {
	width:10px;
	float:left;
	margin:-7px 0px 0px 535px;
	background:white;
}
/************* akhir service**/
/******************* awal factory */

.factory {
	background:url(../images/factory.jpg);
	background-size: cover;
	height:318px;
}
.columnfactory1 {
	width:460px;
	float:left;
	margin:0px 0px 0px -40px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.columnfactory3 {
	width:219px;
	float:left;
	margin:-140px 0px 0px 424px;
	background:white;
	border-top:0px solid white;
	padding:45px 0px 5px 2px;
}

.columnfactory4 {
	width:225px;
	float:left;
	margin:0px 0px 0px -40px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 0px;
}

.columnfactory5 {
	width:225px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 2px 0px 3px;
}

.columnfactory6 {
	width:222px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:0px 0px 0px 3px;
}

.columnfactory7 {
	width:225px;
	float:left;
	margin:0px 0px 0px -40px;
	background:white;
	border-top:0px solid white;
	padding:6px 2px 0px 0px;
}

.columnfactory8 {
	width:223px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:6px 2px 0px 4px;
}

.columnfactory9 {
	width:222px;
	float:left;
	margin-right:0px;
	background:white;
	border-top:0px solid white;
	padding:6px 0px 0px 4px;
}
.panahfactory {
	width:10px;
	float:left;
	margin:-7px 0px 0px 585px;
	background:white;
}

/************* akhir factory**/
/******************* awal contact */
.contact {
	background-size: cover;
	height:0px;
}

.columncontact1 {
	width:225px;
	float:right;
	margin:-521px 0px 0px 0px;
	background:white;
	padding:0px 0px 5px 2px;
}
.columncontact2 {
	width:225px;
	float:right;
	margin:-179px 0px 0px 0px;
	background:white;
	padding:0px 0px 5px 2px;
}
.subbannercontact2 a img {
	filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

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”); 
}

.subbannercontact2 a:hover img {
	filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’>
	<filter id=\’grayscale\’>
	<feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 
	0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/>
	</filter></svg>#grayscale”); 

}
.panahcontact {
	width:10px;
	float:left;
	margin:-3px 0px 0px 650px;
	background:white;
}

/************* akhir contact**/

.servicecolumnzone {
	padding:20px 0px 16px 0px;
}

.servicecolumn1 {
	width:48%;
	float:left;
	margin:0px 0px 10px 0px;
}

.servicecolumn2 {
	width:48%;
	float:right;
	margin:0px 0px 10px 0px;
}

.our-comment {
	margin:10px 0px 0px 0px;
}

.blog-posted-row {
	padding:3px;
}

.ourprojectrow {
	margin-bottom:20px; 
	border-bottom:1px dotted #000000; 
	padding-bottom:10px;
}

.project-img {
	float:right;
	margin-left:20px;
	border: 6px solid #b0a48b;
}

input.button {
	color:#ffffff;
	background:#414141;
	font:bold 11px Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding:10px 10px;
	margin:0px 5px 5px 0;
	border:1px solid #000000;
}
input.button:hover {
	cursor:pointer;
	color:#cccccc;
}

.readmore {
	padding:10px 0px 10px 0px;
}

/* Inside Style End Here	*/