@charset "utf-8";
/* CSS Document */

/*========= SETTING FONT ========*/
	@font-face{ src:url(../fonts/opensans/OpenSans-Bold.ttf); font-family:"opensans-bold"; }
	@font-face{ src:url(../fonts/opensans/OpenSans-Light.ttf); font-family:"opensans-light"; }
	@font-face{ src:url(../fonts/opensans/OpenSans-Regular.ttf); font-family:"opensans-regular"; }
/*========= SETTING FONT ========*/

/*========= SETTING FONT ========*/
	@font-face{ src:url(../fonts/nexa/Nexa-Bold.otf); font-family:"nexa-bold"; }
	@font-face{ src:url(../fonts/nexa/Nexa-Light.otf); font-family:"nexa-light"; }
/*========= SETTING FONT ========*/

/*=======================CSS Utama=======================*/
	*{margin:0px; padding:0px;}
	body{background:#FFF; font-size:12px; font-family:"Arial",tahoma,verdana; line-height:1.5; color:#333;}
	.clear{clear:both;}
	.hidden-all{ display:none !important; }
	.link{outline:none;color:inherit; text-decoration:none;}
	.link:hover, .link:active, .link:focus{outline:none;text-decoration:none; color:inherit;}
	.info{
		font-style:italic;
		font-size:12px;
		color:#CC0000;
		margin-top:-10px;
		margin-bottom:10px;
	}
	.bg-gambar-responsive{
		width:100%;
		padding:5px;
		margin-bottom:15px;	
		text-align:center;
	}
	.bg-gambar-responsive img{
		width:auto;
		max-width:100%;
	}
	.content{
		padding-bottom:15px;
	}
	.content p{
		font-family:"opensans-regular";
		font-size:13px;
		color:#333;	
		line-height:1.5;
		margin-bottom:10px;
	}
	.input-noradius{
		border-radius:3px;
		box-shadow:none;
		margin-bottom:15px;
	}
	.btn-input-noradius, .btn-input-noradius:focus, .btn-input-noradius:hover, .btn-input-noradius:active{
		background:#e3e3e3;
		border-radius:0px;
		outline:none;
		border:1px solid #d4d4d4;
	}
	.tbl_default{
		padding:4px;
		background:#fff;
		border-radius:0px;
		border:1px solid #e11005;
	}
	.tbl_default span:hover {
		background:#c21c13;
		-webkit-transition:all 0.75s linear;
		-moz-transition:all 0.75s linear;
		-o-transition:all 0.75s linear;
		transition:all 0.75s linear;
	}
	.tbl_default span{
		display:block;
		background:#e11005;
		color:#fff;
		padding:10px 20px;
		text-transform:uppercase;
		-webkit-transition:all 0.5s linear;
		-moz-transition:all 0.5s linear;
		-o-transition:all 0.5s linear;
		transition:all 0.5s linear;
	}
	.pinned{
		margin-top:10px;
		margin-bottom:10px;
	}
	.not-available{
		width:100%;
		height:350px;
		text-align:center;
		position:relative;	
	}
	
	.not-available img{
		width:450px;
		max-width:100%;
		position:absolute;
		top:50%; left:50%;
		transform:translate(-50%,-50%);	
	}
	.keterangan-text{
		line-height:1.5px;
		font-size:13px;
		font-family:"opensans-regular";
	}
	.keterangan-text h1{
		margin:0px; padding:0px;
		margin-bottom:20px;
		padding-bottom:5px;
		border-bottom:1px solid #d4d4d4;
		font-size:35px;
		font-family:"opensans-bold";
		color:#333;	
	}
	.keterangan-text ul li, .keterangan-text ol li{
		margin-bottom:10px;
		line-height:1.5;
		margin-left:30px;
		font-size:12px;	
	}
	.keterangan-text ul li{list-style:url(../asset/arrow-right.png);}
	
	.sembunyikan{display:none;}
/*=======================CSS Utama=======================*/


/*=========TOP========*/
	#top{
		background:#fff;
		padding:15px 0px;
		min-height:120px;
		height:auto;
	}
	
	#logo{
		width:auto;
		max-width:90%;
		height:auto;
		margin-top:7.5px;
	}
	
	#sosmed{
		text-align:right;
		font-size:0px;
		padding-bottom:7.5px;
		margin-top:15px;
		border-bottom:1px solid #dadada;	
	}
	
	#sosmed .list-sosmed{
		display:inline-block;
		margin-right:7.5px;
		cursor:pointer;
	}
	
	#sosmed .list-sosmed:last-child{
		margin-right:0px;
	}
	#iso-logo{
		margin-right:0px;
		text-align:right;
		margin-bottom:12.5px;	
		font-size:0px;
	}
	#iso-logo .list-iso{
		width:45px; height:55px;
		display:inline-block;
		vertical-align:top;
		margin-left:7.5px;	
	}
	#iso-logo .list-iso:first-child{
		margin-left:0px;	
	}
	
	#menu{
		width:100%;
		background:#fff;
		border-top:1px solid #dadada;	
	}
	#menu ul{
		width:100%;
		font-family:opensans-regular;
		font-size:0px;
		text-align:right;
		margin-bottom:-10px;
	}
	
	#menu ul li{
		display:inline-block;
		list-style:none;
		margin-left:17px;
		font-size:12px;
	}
	#menu ul li:first-child{
		margin-left:0px;	
	}
	
	#menu ul li a{
		position: relative;
		display:inline-block;
		color:#666;
		padding:0 7.5px 10px 7.5px;
		margin-top:5px;
		border-bottom:3px solid #fff;
		text-transform: capitalize;
		text-decoration: none;
		outline: none;
	}
	
	#menu ul li a:hover,
	#menu ul li a:focus {
		outline: none;
	}
	
	
	/* Effect 5: same word slide in */
	#menu ul li a{
		overflow: hidden;
		height:25px;
	}
	
	#menu ul li a.not-act span {
		position: relative;
		display: inline-block;
		-webkit-transition: -webkit-transform 0.3s;
		-moz-transition: -moz-transform 0.3s;
		transition: transform 0.3s;
	}
	
	#menu ul li a.not-act span::before {
		position: absolute;
		top: 30px;
		content: attr(data-hover);
		color:#168d17;
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	
	#menu ul li a.not-act:hover span,
	#menu ul li a.not-act:focus span {
		-webkit-transform: translateY(-30px);
		-moz-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	
	#menu ul li a.act{
		font-family:"opensans-bold";
		color:#168d17;
		background:url(../asset/active-menu.png) center bottom no-repeat;
		border-bottom:3px solid #168d17;
	}
/*=========TOP========*/

/*=========FOOTER========*/
	#content-footer{
		background:url(../asset/bg-footer-left.png) left top no-repeat, url(../asset/bg-footer-right.png) right no-repeat, #cfcfcf;
		padding:25px 0;
	}
	#logo-footer{
		width:auto;
		max-width:90%;
		text-align:left;
		margin-bottom:15px;	
	}
	.judul-footer{
		font-family:"opensans-bold";
		font-size:15px;
		color:#555555;
		text-transform:capitalize;
		margin:0px; padding:0px;	
		margin-bottom:20px;
	}
	.panel-content-footer{
		float:none;
		display:inline-block;
		vertical-align:bottom;	
	}
	.panel-content-footer span, .panel-content-footer table{
		display:block;
		font-size:13px;
		color:#555;
		font-family:"opensans-regular";
		margin-bottom:7.5px;
	}
	.panel-content-footer ul li{
		display:inline-block;
		width:50%;
		font-size:13px;
		color:#555;
		font-family:"opensans-regular";
		margin-bottom:7.5px;
	}
	#img-icon-certificate{
		width:auto;
		max-width:100%;
		margin-bottom:7.5px;
	}
	
	#footer{
		padding:15px 0;
		background:#c5c5c5;
		font-size:13px;
		font-family:"opensans-regular";	
	}
	#footer #footer-kiri{text-align:left;}
	#footer #footer-kanan{text-align:right;}
/*=========FOOTER========*/


/*==========Attribut Website==========*/
	#bg-judul{
		width:100%;
		margin:0px; padding:0px;
		padding:10px 0px;
		background:url(../asset/bg-judul.jpg) repeat;
		background-size:cover;
		padding-top:130px;
	}
	
	#bg-judul h1{
		font-size:45px;
		margin:0px; padding:0px;
		margin-bottom:5px;	
	}
	.judul-utama-abu{
		font-family:"nexa-bold";
		font-size:40px;
		color:#555;
		margin:0px;	padding:0px;
		margin-bottom:15px;	
		margin-top:40px;
	}
	.judul-utama-putih{	
		font-family:"nexa-bold";
		font-size:40px;
		color:#fff;
		margin:0px;	padding:0px;
		margin-bottom:15px;	
		margin-top:40px;
	}
	.judul-sub-abu{
		font-family:"nexa-bold";
		font-size:25px;
		color:#555;
		margin:0px;	padding:0px;
		margin-bottom:15px;	
	}
	.judul-sub-putih{
		font-family:"nexa-bold";
		font-size:25px;
		color:#fff;
		margin:0px;	padding:0px;
		margin-bottom:15px;	
	}
	.btn-utama, .btn-utama:hover, .btn-utama:active{
		width:auto;
		background:#168d17;
		border:none;
		border-radius:0px;
		color:#fff;	
		padding:7.5px 30px;
		margin-top:15px;
	}
	.tombol-download:hover, .tombol-download:focus{
		color:#fff;
		transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;
	}
	.tombol-download{
		width:100%;	
		background:#168d17;
		color:#fff;
		margin-top:15px;
		padding:10px 5px;
		border-radius:7px;
		box-shadow:0px 0px 10px #555;
		border:2px solid #fff;
	}
	.tombol-download a{display:block; height:100%; width:100%;}
	.tombol-download span{
		display:inline-block;
		padding:6px 7px;
		background:#026802;
		font-size:12px;
		margin-left:5px;
		border-radius:100px;
	}
	#mapping{
		padding:10px 0px;
		border-bottom:1px solid #dadada;
		margin-bottom:30px;
		font-family:"opensans-regular";	
		font-size:13px;
		color:#808080;
		box-shadow:0px 0px 5px #ddd;
	}
	#mapping span{
		color:#09629f;	
	}
/*==========Attribut Website==========*/



/*==========HOME=========*/
	.keterangan-opening-text{
		padding:0 0px 15px;
		z-index:999999;
		background:#fff;
	}
	.keterangan-opening-text p:first-child {
		font-size:17px;
		color:#0072c2;
	}
	
	.panel-company{
		width:100%;
		max-width:405px;
		height:300px;	
		position:relative;
		margin-top:-50px;
		z-index:99999;
		right:0px;
	}
	.panel-project{
		width:100%;
		max-width:405px;
		height:300px;	
		z-index:99999;
		position:relative;
		right:0px;
	}
	.panel-company img, .panel-project img{
		width:100%;
		height:100%;	
	}
	.keterangan-panel-company, .keterangan-panel-project{
		width:calc(100% - 30px);
		height:auto;
		position:absolute;
		left:15px;
		bottom:15px;	
	}
	.keterangan-panel-company p, .keterangan-panel-project p{
		color:#fff;	
	}
	
	.keterangan-panel-company a, .keterangan-panel-project a{display:block; width:100%; padding:5px 10px;}
	.keterangan-panel-company .bg-link, .keterangan-panel-project .bg-link{
		font-family:"opensans-regular";
		font-size:13px;
		color:#fff;
		background:#168d17;
		border-radius:3px;
		width:100px;
		text-align:center;
	} 
	
	.keterangan-panel-company .bg-link:hover, .keterangan-panel-project .bg-link:hover{
		color:#fff;
	}
	
	.keterangan-panel-company .bg-link:active, .keterangan-panel-project .bg-link:active, .keterangan-panel-company .bg-link:focus, .keterangan-panel-project .bg-link:focus{
		opacity:0;
		-o-opacity:0;
		-moz-opacity:0;
		-webkit-opacity:0;
		transform:scale(1.5,2);
		-o-transform:scale(1.5,2);
		-moz-transform:scale(1.5,2);
		-webkit-transform:scale(1.5,2);
		transition:0.2s all ease-out;
		-o-transition:0.2s all ease-out;
		-moz-transition:0.2s all ease-out;
		-webkit-transition:0.2s all ease-out;
	}
	
	
	#panel-product{
		background:url(../asset/bg_open_product.jpg) fixed center;	
		background-size:cover;
		padding-top:70px;
		margin-top:-50px;
	}
	#panel-product p{color:#fff;}
	
	.bg-kategori-home{
		font-size:0px;
		width:100%;	
	}
	.kategori-product-home{
		width:calc(33.333% - 20px);
		height:160px;
		margin-right:20px;
		margin-bottom:20px;
		background:none;
		display:inline-block;
		padding:10px;
		position:relative;
		vertical-align:top;
		border:1px solid #fff;
		overflow:hidden;
	}
	.kategori-product-home img{
		position:absolute;
		width:100%;	height:100%;	
		top:0px; left:0px;  
		filter: gray;
	}
	.kategori-product-home .nama-kategori{
		background:url(../asset/bg-hitam-transparan.png);
		position:absolute;
		width:100%; min-height:30px;
		text-align:center;
		bottom:0px; left:0px;
		padding:5px;
		font-family:"opensans-regular";
		text-transform:capitalize;
		font-size:12.5px;
		z-index:3;
		color:#fff;
		transition:all 0.2s ease-out;
		-o-transition:all 0.2s ease-out;
		-moz-transition:all 0.2s ease-out;
		-webkit-transition:all 0.2s ease-out;
	}
	.kategori-product-home:hover .nama-kategori{
		padding-top:calc(100% - 41px);
		transition:all 0.4s ease-out;
		-o-transition:all 0.4s ease-out;
		-moz-transition:all 0.4s ease-out;
		-webkit-transition:all 0.4s ease-out;
		cursor:pointer;
	}
	
	#panel-certificate{
		padding-top:30px;
		padding-bottom:30px;	
	}
	.keterangan-panel-certificate{
		margin-top:-15px;	
	}
/*==========HOME=========*/

.gambar-about{
	max-height:300px;
	margin-top:15px;
	width:100%;	
}

/*=============Contact===========*/
	#peta{
		width:100%;	
		border:5px solid #ebebeb;
		margin-bottom:15px;
	}
	#peta iframe{
		border:0px; width:0px;
		width:100%;
		min-height:350px;
		max-height:400px;
		height:auto;	
	}
	#table-contact{
		width:100%;	
		font-family:"opensans-regular";
		font-size:13px;
		margin:0px; padding:0px;
	}
	#table-contact h2{
		margin:0px; padding:0px;
		padding-bottom:5px;
		border-bottom:1px solid #f0f0f0;	
	}
	#table-contact tr td{
		border:0px;	
	}
	#table-contact tr td:first-child{
		font-family:"opensans-bold";
		color:#555;	
	}
/*=============Contact===========*/

/*==================================================
 * Effect 2
 * ===============================================*/
	.effect2
	{
	  position: relative;
	}
	.effect2:before, .effect2:after
	{
	  z-index: -1;
	  position: absolute;
	  content: "";
	  bottom: 15px;
	  left: 10px;
	  width: 50%;
	  top: 80%;
	  max-width:300px;
	  background: #777;
	  box-shadow: 0 15px 10px #777;
	  transform: rotate(-3deg);
	}
	.effect2:after
	{
	  transform: rotate(3deg);
	  right: 10px;
	  left: auto;
	}
/*==================================================
 * Effect 2
 * ===============================================*/
 
 /*Pembagian-List*/
 	.bg-list{
		font-size:0px;	
		margin-left:-15px;
		margin-right:-15px;
	}
 	.list{
		display:inline-block;
		vertical-align:top;
		width:25%;
		padding-left:15px;
		padding-right:15px;
		margin-bottom:30px;
	}
	.list-3{
		display:inline-block;
		vertical-align:top;
		width:33.333%;
		padding-left:15px;
		padding-right:15px;
		margin-bottom:30px;
	}
 /*Pembnagian-List*/
 
 
 
 /*Certificate*/
 	.list-certificate{
		width:100%;
		height:200px;
		overflow:hidden;
		position:relative;
		border-radius:5px;
		border:1px solid #ccc;
		box-shadow:0px 0px 5px #d4d4d4;
	}
	.list-certificate .gambar-certificate{
		width:100%;
		height:auto;
		min-height:100%;
		border-radius:5px;
		border:1px solid #f0f0f0;	
	}
	.view-large{
		position:absolute;	
		width:0%;
		height:0%;
		top:50%; left:50%;
		border-radius:5px;
		transition:all 0.3s ease-out; 
		-o-transition:all 0.3s ease-out; 
		-moz-transition:all 0.3s ease-out; 
		-webkit-transition:all 0.3s ease-out; 
		background:url(../asset/bg-transparant.png) repeat;
	}
	.view-large img{
		width:auto;
		height:auto;
		position:absolute;
		top:50%; left:50%;
		transform:translate(-50%,-50%);
		border:none;
		opacity:0;
	}
	.nama-list-certificate{
		width:100%;
		font-family:"opensans-bold";	
		font-size:13px;
		color:#000;
		bottom:0px;
		padding-top:3px;
		margin-top:10px;
		border-top:1px solid #d4d4d4;
	}
	
	.list-certificate:hover .view-large{
		width:100%;
		height:100%;
		top:0px; left:0px;
		transition:all 0.4s ease-in;
		-o-transition:all 0.4s ease-in;
		-moz-transition:all 0.4s ease-in;
		-webkit-transition:all 0.4s ease-in;  
	}
	.list-certificate:hover .view-large img{
		opacity:1;
		-webkit-transition:all 0.5s ease-out;
		-moz-transition:all 0.5s ease-out;
		-o-transition:all 0.5s ease-out;
		transition:all 0.5s ease-out;
		
		-webkit-transition-delay: 0.5s;
		-moz-transition-delay: 0.5s;
		-o-transition-delay: 0.5s;
    	transition-delay: 0.5s;
	}
 /*Certificate*/
 
 /*Project*/
	#bg-list-project{
		width:100%;
		height:auto;
		border-bottom:5px solid #f2f2f2;
	}
	
	#bg-list-project ul{
		font-size:0px; margin:0px;
	}
	
	#bg-list-project ul li{
		display:inline-block;
		padding:10px;
	}
	
	#bg-list-project .no-proj{width:50px; text-align:center;}
	#bg-list-project .name-proj{width:calc(35% - 50px); text-align:left;}
	#bg-list-project .location-proj{width:25%; text-align:left;}
	#bg-list-project .client-proj{width:25%; text-align:left;}
	#bg-list-project .date-proj{width:15%; text-align:left;}
	
 	#judul-project{
		padding-top:15px;
		padding-bottom:15px;
		background:#168d17;
		border-bottom:5px solid #016303;
	}
	#judul-project li{
		font-size:14px;
		color:#fff;
		vertical-align:middle;
		font-family:"opensans-bold";
	}
	
	#bg-list-project .list-project{
		padding-bottom:12.5px;
		padding-top:12.5px;
		border-bottom:1px solid #f2f2f2;
		border-left:5px solid #fff;
		
		
		transition:all 0.2s ease-in;
		-o-transition:all 0.2s ease-in;
		-moz-transition:all 0.2s ease-in;
		-webkit-transition:all 0.2s ease-in;
	}
	#bg-list-project .list-project li{
		font-size:13px;	
		vertical-align:top;
		font-family:"opensans-regular";
		color:#606060;
		margin:0px; padding:0px;
	}
	
	#bg-list-project .list-project:hover{
		background:#ececec;
		border-left:5px solid #0b850c;
		
		transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;
	}
	#bg-list-project .list-project:hover li{
		color:#0b850c;
		font-family:"opensans-bold";
	}
 /*Project*/
 
 /*Detail Project*/
	
	.judul-dproject{
		color:#828181;
		font-family:"opensans-bold";
		font-size:30px;
		margin:0px; padding:0px;
		margin-bottom:5px;
	}
	.tgl-dproject{
		color:#0076b4;
		font-family:"opensans-regular";
		font-size:15px;
		display:block;
		margin-bottom:40px;
	}
	.keterangan-dproject{
		padding-bottom:15px;
		margin-bottom:15px;
		border-bottom:1px solid #f2f2f2;
	}
	.keterangan-dproject:last-child{border-bottom:none;}
	.judul-keterangan-dproject{
		font-size:0px;
		margin-bottom:15px;
	}
	.judul-keterangan-dproject img{
		display:inline-clock;
		vertical-align:middle;
		margin-right:10px;
	}
	.judul-keterangan-dproject  span{
		font-size:"20px;";
		color:#828181;
		vertical-align:middle;
		font-size:20px;
		font-family:"opensans-bold";
	}
	.text-keterangan-dproject{
		font-family:"opensans-regular";
		font-size:14px;
		color:#0076b4;
	}
	.text-keterangan-dproject ul li, .text-keterangan-dproject ol li{
		margin-left:50px;
		margin-bottom:5px;
		line-height:1.5;
	}
	.list-gallery-dproject{
		width:100%;
		height:180px;
		border:1px solid #d4d4d4;
		border-radius:3px;
		min-height:30px;
		position:relative;
		overflow:hidden;
	}
	.list-gallery-dproject img{
		width:100%;
		min-height:100%;
		height:auto;
		border-radius:3px;
	}
	.nama-list-gallery-dproject{
		position:absolute;
		text-align:left;
		color:#fff;
		width:100%;
		padding:7.5px 5px;
		bottom:-100%;
		border-radius:0px 0px 3px 3px;
		font-size:13px;
		font-family:"opensans-regular";
		background:url(../asset/bg-transparant.png) repeat;
		
		transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;
	}
	.list-gallery-dproject:hover .nama-list-gallery-dproject{
		bottom:0;
		
		transition:all 0.7s ease-in;
		-o-transition:all 0.7s ease-in;
		-moz-transition:all 0.7s ease-in;
		-webkit-transition:all 0.7s ease-in;
	}
 /*Detail Project*/
 
 
 /*Kategori*/
	#kateogri{
		width:100%;
		padding:10px;
		border-radius:4px;	
		background:#168d17;
		margin-bottom:20px;
		position:relative;
	}
	#botton-drop-kategori{
		background:#193b7f;
		padding:5px 7.5px;
		border:none;
		border-radius:4px;
		position:absolute;
		top:10px; right:10px;
		display:none;	
	}
	#kateogri h1{
		margin:0px; padding:0px;
		margin-bottom:5px;
		letter-spacing:1px;
		font-family:"opensans-bold";
		font-size:25px;
		color:#fff;	
		margin-left:5px;
	}
	#kateogri ul{
		width:100%;
		background:#fff;
		margin:0px; padding:0px;
		border-radius:4px;
		padding:5px;	
		margin-top:10px;
	}
	#kateogri ul li{
		list-style:none;
		margin:0px; padding:0px;
		padding:15px 0;
		border-bottom:1px solid #f0f0f0;	
		position:relative;
	}
	#kateogri ul li:last-child{
		border-bottom:none;	
	}
	#kateogri ul li span{
		display:block;
		position:absolute;
		z-index:2;
		top:50%;
		left:5px;
		transform:translate(0,-50%);
	}
	#kateogri ul li .hover-effect-kat{
		width:0; height:100%;
		top:0px;
		background:#f0f0f0;	
		position:absolute;
		transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;
	}
	#kateogri ul li:hover .hover-effect-kat, #kateogri ul li.active-kat .hover-effect-kat{
		width:100%;
		transition:all 0.6s ease-out;
		-o-transition:all 0.6s ease-out;
		-moz-transition:all 0.6s ease-out;
		-webkit-transition:all 0.6s ease-out;
	}
/*Kategori*/
 
 /*List Produk*/
	.list-produk{
		width:100%;
		height:170px;
		overflow:hidden;
		border-radius:3px;
		position:relative;
		box-shadow:0px 0px 5px #d4d4d4;
	}
	.list-produk:before{
		content:"";
		position:absolute;
		top:50%; left:50%;
		transform:translate(-50%,-50%);
		width:32px; height:32px;	
		background:#168d17;
		opacity:0;
		border-radius:100px;
		transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;	
	}
	.list-produk:hover::before{
		opacity:0.7;
		content:"";
		width:130%; height:130%;
		border-radius:3px;
		transition:all 0.5s ease-out;
		-o-transition:all 0.5s ease-out;
		-moz-transition:all 0.5s ease-out;
		-webkit-transition:all 0.5s ease-out;	
	}
	.list-produk:after{
		content:"";
		position:absolute;
		top:0px; left:0px;
		width:32px; height:32px;	
		background:url(../asset/view-large.png) no-repeat;
		top:0px; left:50%;
		transform:translate(-50%,0);
		z-index:2;
		opacity:0;
	}
	.list-produk:hover::after{
		opacity:1;
		top:50%; left:50%;
		transform:translate(-50%,-50%);
		
		-webkit-transition:all 0.5s ease-out;
		-moz-transition:all 0.5s ease-out;
		-o-transition:all 0.5s ease-out;
		transition:all 0.5s ease-out;
		
		-webkit-transition-delay: 0.5s;
		-moz-transition-delay: 0.5s;
		-o-transition-delay: 0.5s;
    	transition-delay: 0.5s;
	}
	
	.list-produk img{
		width:100%;
		min-height:100%;
		height:auto;
		border-radius:3px;
	}
	
	.nama-list-produk{
		padding-top:5px;
		margin-top:10px;
		font-size:13px;
		border-top:1px solid #d4d4d4;
		font-family:"opensans-regular";
	}
	
	#slider-product{
		height:400px;
	}
	.info-slider{
		background:#f5f5f5;
		padding:5px;
		font-size:12px;
		font-style:italic;
		margin-bottom:5px;
	}
	#slider-product .bg-img{
		width:calc(100% - 2px);
		height:400px;
		background:#fff;
		padding:5px;
		border:1px solid #e0e0e0;
		position:relative !important;
		overflow:hidden;
	}
	#slider-product .bg-img img{
		width: 80% !important;
		position:absolute;
		top:50%;
		left:10%;
		transform:translate(0,-50%);
	}
	
	#thumbnail-slider-product{
		background:#fcfcfc !important;
		padding:5px;	
		position:relative;
		border:1px solid #ccc;
	}
	#thumbnail-slider-product .list-thumbnail{
		width:100%;
		border:1px solid #d5d5d5;
		padding:5px;
	}
	#thumbnail-slider-product .bg-list-thumbnail{
		height:70px;
		width:100%;
		overflow:hidden;
	}
	#thumbnail-slider-product .list-thumbnail img{
		width:100%;
		min-height:100%;
		filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
    	-webkit-filter: grayscale(100%);
	}
	#thumbnail-slider-product .list-thumbnail:hover img{
		filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
    	-webkit-filter: grayscale(0%);
		transition:all 0.3s ease-in-out;
		-o-transition:all 0.3s ease-in-out;
		-moz-transition:all 0.3s ease-in-out;
		-webkit-transition:all 0.3s ease-in-out;
	}
	#thumbnail-slider-product .owl-controls .owl-nav .owl-prev{left:0px;}
	#thumbnail-slider-product .owl-controls .owl-nav .owl-next{right:0px;}
	#thumbnail-slider-product .owl-controls .owl-nav .owl-prev, #thumbnail-slider-product .owl-controls .owl-nav .owl-next{
		background:#ccc;
		opacity:0.5;
		width:20px;
		height:100%;
		padding-top:38px;
		text-align:center;
		color:#fff;
		display:inline-block;
		position:absolute;
		top:0;
	}
 /*List Produk*/
 
 /*pagination*/
	.paging{
		margin-top:0px;
		margin-bottom:-10px;
		border-top:1px solid #168d17;	
	}
	.list-paging{
		text-align:left;	
	}
	.info-page{
		text-align:right;
		font-size:12px;
		font-family:"opensans-regular";
		padding-top:5px;
		margin-left:3px;
	}
	.pagination{
		margin-top:0px;
		margin-bottom:0px;
	}
	.pagination li a{
		border-radius:0px !important;
		border:1px solid #168d17;
		border-top:0px;	
		margin:0px 3px;
		color:#666;
	}
	.pagination li a:hover,
	.pagination li a:focus{
		border:1px solid #048505;
		border-top:0px;	
		background:#056906;
		color:#fff;
	}
	.pagination .active a, 
	.pagination .active a:hover,
	.pagination .active a:focus{
		background:#168d17;
		border:1px solid #168d17;
		border-top:0px;
	}
/*pagination*/