@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: myFirstFont;
    src: url(../style/FUTURA.TTF);
}

div {
    font-family: myFirstFont;
}

body
{
	font-family: myFirstFont, verdana;
}
a { color:#039;}
input[type="text"] {
	height: 22px;
	padding:2px;
	width:200px;
	color:#000;
	
}




.overlay-bg{
    z-index: 10009999999;
    width: 100%;
    background-image: url("../imagesaux/perprindoevent.png");
    position: fixed !important; 
    top: 0;
    bottom:0;
    
    overflow-y:scroll;
    overflow-x:hidden;
    
}


.close-btn-wrapper{
    position:relative;
    width:98%;
    left:1%;
}

.close-btn2{
    position:absolute;
    top:0;
    right:0;
    cursor: pointer;
}

.listsamping
{
    list-style-type: none;
    
    
}
.othernews
{
    font-size: 30px;
    margin: 10px;
}
.detailnewsjudul
{
    font-size: 30px;
    margin: 10px;
    font-weight: bolder;
}
.detailwaktujudul{
    font-size: 12px;
    color:graytext;
    font-style: italic;
    margin-left: 9px;
}
.imgdetailnews{
    margin-left: 9px;
    margin-right: 20px;
    width: 40%;
    margin-bottom: 20px;
    float: left;
}
.sadurnews
{
    margin-left: 9px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.imgdetailnews img{
   width: 100%;
}
.txtdetailnews
{
    width: 85%;
    margin-left: 9px;
    text-align: justify;
}
.gridnews
{
    width: 24%;
    float: left;
    margin-left: 5px;
    margin-bottom: 18px;
    height: 295px;
}
.dateeenews
{
    font-size: 10px;
    font-style: italic;
    color: graytext;
}
.gridnews :hover
{
    background-color: activeborder;
    cursor: pointer;
}
.gridnews img
{
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: 5px;
}

input[type="password"] {
	height: 22px;
	padding:2px;
	width:200px;
	color:#000;
}
/* header sttc */
#search
{
	float:right;
	padding-right:2px;
}
#buttonsearch
{
	padding-top:5px;
}

#textsearch
{
	position:relative;
	top:10px;
	color:white;
        height:37px;
        background-color: #1954a5;
        box-shadow: inset 0 -2px 0 azure; 
        border: none;
        margin-right: 10px;
}
#headercontent
{
	height:42px;
	background-color: #1954a5;
	margin-top:-10px;
	margin-left:-8px;
	margin-right:-8px;
	position:fixed;
	width:100%;
	z-index:199;
}
#headercontentetc
{
	z-index:200;
	margin:auto;
	width:100%;
}
#auxlogo
{
	margin-top:2px;
	width:145px;
	padding:2px;
	background-image:url(../imagesaux/backgroundblue.png);
	position:relative;
	float:left;
	z-index:20;
	border-radius:0px 0px 3px 3px;
}
#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
.quality
{
	font-style:italic;
	font-size:36px;
	margin:0px;
	padding:0px;
}
.come
{
	font-size:28px;
	margin:0px;
	padding:0px;
}
.wording
{
	font-size:14px;
	margin:0px 0px 20px 0px;
	padding:0px 0px 20px 0px;
}



/* header sttc */

#maincontent
{
	padding:52px 0px;
	width:100%;
	margin:auto;
	background-color:white;
	
	
}
.divhalf
{
	width:49.99999%;
	height:200px;
	float:left;
}
.divfull
{
	margin-top:-39px;
	padding-top:48px;
	width:100%;
	height:390px;
	background-color:#f1f1f1!important;
	
}

.marginbottomisnt
{margin-bottom: 80px;}

#pilihansamping
{
    width: 29.9999%;
    padding: 2%;
    float: left;
    color: darkslategray;
    position: fixed;
    z-index: 1000;
    display: block;
    font-size: 40;
}
#pilihansamping a
{
    text-decoration: none;
}
#pilihansamping a:hover
{
    color: #2c9dd8;
}
.tigarowindexcontainer{
    width: 100%;
    margin: auto;
}
.tigarowindex{
    width: 24%;
    float: left;
    font-weight: bolder;
    color: #2c9dd8;
    text-align: center;
    font-size: 24px;
}
.staticpageindex{
    padding: 20px;
    padding-top: 50px;
}
.imgindexstaticright
{
    width: 22%;
    float: right;
    padding: 8px;
}
.textrightindex
{
    width: 30%;
    float: right;
    
}

.ntepuguh
{
    width: 30%;
    float: left;
    margin-right: 10px;
}

.imgindexstaticleft
{
    width: 40%;
    margin-top: -80px;
    float: left;
    margin-left: -40px;
}
.imgindexstaticleftwnt
{
    width: 290px;
    margin-top: 60px;
    float: left;
    
}

.textleftindex{
    width: 59%;
    color: #2c9dd8;
    
    float: left;
}
.txtboldbesar{
    font-size: 32px;
    font-weight: bolder;
    
    
    
}

.txtfiturindex{
    font-size: 20px;
}



.pilihanprod
{
    width: 69.9999%;
    float: right;
    margin-top:10px;
    min-height: 400px;
        
}
.pilihanprod a
{
    text-decoration: none;
    color: #2c9dd8;
        
}
.jajaranfeat {
    
    list-style-type: none;
}


.imgfeatpilihandepan
{
    width: 25%;
    padding-bottom: 10px;
    float: right;
    clear: both;
}


#slidepilihansaming {
     font-size:30px;
     line-height: 30px;
     cursor:pointer;
     overflow: hidden;
     float: left;
     position: fixed;
     border-radius: 8px;
     background-color:#2c9dd8; 
     color: darkslategray;
     margin-top: 5px;
     margin-left: 4px;
     width: 40px;
     height: 40px;
     text-align: center;
     vertical-align: middle;
     display: none;
}
#closebtn{
    font-size:28px;
    line-height: 30px;
    font-weight: bolder;
    float: left;
    position: fixed;
    color: #2c9dd8;
    margin-top: -8px;
    margin-left: -10px;
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    display: none;
}
    

/*slider */
div.wrap {
width:100%;
margin : auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width: 100%;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#slidershow {
margin : -3px 0 0;
float:left;
position:relative;
}
div#video-slidershow {
width:100%;
margin : -3px 0 0;
}
div#slidershow div.wrap {
height : 455px;
background : url('imagesaux/header-bg.png') no-repeat 50% 0;
}
div#slidershow div#slide-holder {
z-index : 40;
width:100%;
height : 454px;
position : absolute;
}
div#slidershow div#slide-holder div#slide-runner {

width:100%;
height : 454px;
overflow : hidden;
position : relative;
}
div#slidershow div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#slidershow div#slide-holder div#slide-controls {
left : 0;
bottom : 5px;
width:100%;
height : 46px;
display : none;
position : absolute;
background : url('imagesaux/slide-bg.png') 0 0;
}
div#slidershow div#slide-holder div#slide-controls p.text {
float : right;
color:#F90;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;

}
div#slidershow div#slide-holder div#slide-controls p#slide-nav {
float : left;
height : 24px;
display : inline;
padding-left:22px;
margin : 11px 15px 0 0;
}
div#slidershow div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#slidershow div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#slidershow div#slide-holder div#slide-controls p#slide-nav a {
background-image : url('imagesaux/silde-nav.png');
}
div#nav ul li a {
background : url('imagesaux/nav.png') no-repeat;
}

.residential
{
	background-image:url(../imagesaux/icon-residential.png);
	width:150px; height:50px;
	border-radius:5px;
	float:right;
	margin:50px 10px;
	color:#FFF;
	text-align:center;
	font-size:22px;
        background-size:cover;
	
}
.industrial
{
	background-image:url(../imagesaux/icon-commercial.png);
	width:150px; height:50px;
	border-radius:5px;
	float:left;
	margin:100px 10px;
	color:#FFF;
	text-align:center;
	font-size:22px;
        background-size:cover;
}
.residentialback{
	width:49.99999%;
	height:200px;
	float:left;
	
}
.industrialback{
	width:49.99999%;
	height:200px;
	float:left;
	border-left:1px #999999 solid;
}



/* Footer  */
#footer
{
        z-index: 2000;
	min-height:1px;
        position: relative;
        background-color:#ffffff;
	width:100%;
	font-size:18px;
        -webkit-box-shadow: 0px 80px 60px 70px black;
	   -moz-box-shadow: 0px 80px 60px 70px black;
	        box-shadow: 0px 80px 60px 70px black;
	
}
.footercontent
{
	width:100%;
	margin:auto;
	padding:8px;
	color:azure;
}
.footercontent li
{
	list-style:none; padding:3px; margin-left:-40px;
}
.footercontent a
{ color: black; text-decoration:none; }
.footercontent a:hover
{ color: #2c9dd8;}
.divfooter
{
	width:18%;
	float:left;
	margin-top:10px;
        color: black;
	
}
.divfooterrght
{ width:55%;
float:right;
margin-top:10px;
color: black;
text-align: right; 
}
.headertextfooter
{
    font-size:24px;
    font-weight: bolder;
}
#colorfooter{
    width: 100%;
    background-color: #5caedb;
    position: relative;
    z-index: 2000;
}
.cpyfooter
{
	float:left;
	padding-top:10px;
	margin-bottom:10px;
	font-size:12px;
	font-style:italic;
	width:50%;
        background-color: #5caedb;
        position: relative;
}
.rightcpyfooter
{	
	font-size:11px;
	color:azure;
	
        background-color: #5caedb;
        width: 100%;
	text-align:center;
        float: left;
        position: relative;
        
        
        
}





#login
{
	margin:auto;
	margin-top:70px;
	width:350px;
	height:260px;
	border:1px solid #058ffc; 
	border-radius:5px 5px 5px 5px;
	padding:20px;
	display:none;
}
#overlay_form
{
	margin:auto;
	margin-top:-30px;
	width:100%;
	height:100%;
	border:1px solid #058ffc; 
	border-radius:5px 5px 5px 5px;
	padding:10px;
	position:relative;
	z-index:1440;
	overflow:auto;
	display:none;
}
#layer /* css lapisan popup */
{
	position:fixed;
	width:100%;
	height:100%;
	opacity:0.8;
	filter:alpha(opacity=40);
	z-index:230;top:0;left:0;
	background-color:#000;
	display:none;
}
#fulltitle
{
	
}


/*AMPUTATOR*/
.kotakkecilamp
{
	font-size:12px;
	border:1px #060 solid;
	border-radius:5px;
	padding:2px;
	margin-left:3px;
	float:left;
	width:32%;
}
.kotakbesaramp
{
	width:98%;
	font-size:12px;
	border:1px #060 solid;
	border-radius:5px;
	padding:2px;
	margin:auto;
	margin:10px 0px 10px 0px;
	
}
.kotakbesarimg
{
	float:left;
	width:31%;
	height:auto;
	border:1px #060 solid;
	margin-left:5px;
	margin-top:5px;
	margin-right:5px;	
}
.imgkotak
{
	padding-top:3px;
	width:30%;
	margin:auto;
}
.detailkotak
{
	width:100%;
	padding:3px;
	margin-bottom:10px;
}

#tableaddproduct
{
	border:1px #060 solid;
	text-align:center;
}
.choosefeat
{
	border:1px #060 solid;
	text-align:center;
	float:left;
	width:19%;
	margin-right:2px;
	margin-bottom:5px;
}
#allfeatur
{ display:none; }

#headerproduct
{
	width:100%; 
	margin-top:-3px;
}
#headerproduct img {width:100%;
}
/*  halaman product  */
.titleproduct
{
	color:#039;
	font-style:italic;
	font-size:18px;
	font-weight:bold;
}
.titlecategoryproduct 
{
	color:#039;
}
.productnotfound
{ width:100%;
margin:auto;
border-radius:5px;
background-image:url(../imagesaux/backgroundblue.png);
padding:20px 0px 20px 0px;
margin:10px 0px 30px 0px;
text-align:center;
color:white;
}

.categoribox
{
	text-align:center;
	margin-top:1px;
	margin-bottom:10px;
	margin-right:1px;
	margin-left:1px;
	float:left;
	width:32%;
	height:190px;
	padding:3px;
	border:2px solid #FFF;
	border-radius: 8px 8px 8px 8px;
	position:relative;
}
.categoribox:hover
{
	border:2px solid #039;
	border-radius: 8px 8px 8px 8px;
	moz-box-shadow: 2px 4px 2px #039;
	box-shadow: 2px 4px 2px #039;
	-webkit-box-shadow: 2px 4px 2px #039;
	cursor:pointer;
	font-weight:bold;
}
.grid3
{
	text-align:center;
	margin-top:5px;
	margin-bottom:20px;
	margin-right:1px;
	margin-left:1px;
	float:left;
	width:32%;
	height:400px;
	padding:3px;
	border:2px solid #FFF;
	border-radius: 8px 8px 8px 8px;
	position:relative;
}
.grid3:hover
{
	border-radius: 8px 8px 8px 8px;
	border:2px solid #039;
	-moz-box-shadow: 2px 4px 2px #039;
	box-shadow: 2px 4px 2px #039;
	-webkit-box-shadow: 2px 4px 2px #039;
	cursor:pointer;
}
.imggrid3 {margin:auto; width:80%; margin-top:14px;}
.detailgrid3 {margin:auto; width:80%; margin-top:14px;}
.imggrid3 img {width:100%;}
.layer
{
	color:white;
	background-color:#039;
	border-radius:0px 8px 0px 5px;
	position:absolute;
	bottom:0px;
	left:0px;
	display:none;
	padding:0px 30px 0px 12px;
}
.featcontent
{
    
    width:100%;
    padding-bottom: 30px;
        
}
.satuanfeat
{
    float: left;
    width: 10%;
    margin-bottom: 40px;
}
.featcontent img
{
    width: 100%;       
}
.contentfeatketimg
{
    width: 100%;
    
}
.contentfeatket
{
    font-size: 14px;
    padding: 20px;
    vertical-align: central;
    min-height: 70px;
    color: #2c9dd8;
    width: 69%;
    margin: auto;
    float: left;
}
.textfeatur
{
	border:1px solid #FFF;
	border-radius:5px 5px 5px 5px;
	background-color:#039;
	color:#FFF;
	padding:8px;
	top:1px;
	right:1%;
	position:absolute;
	z-index:5;
	width:250px;
	display:none;
	overflow:hidden;
}
.textfeatur2
{
	border:1px solid #FFF;
	border-radius:5px 5px 5px 5px;
	background-color:#039;
	color:#FFF;
	padding:8px;
	top:1px;
	right:-95%;
	position:absolute;
	z-index:5;
	width:250px;
	display:none;
	overflow:hidden;
}
.textfeatur3
{
	border:1px solid #FFF;
	border-radius:5px 5px 5px 5px;
	background-color:#039;
	color:#FFF;
	padding:8px;
	top:1px;
	right:-195%;
	position:absolute;
	z-index:5;
	width:250px;
	display:none;
	overflow:hidden;
}
.textfeatur4
{
	border:1px solid #FFF;
	border-radius:5px 5px 5px 5px;
	background-color:#039;
	color:#FFF;
	padding:8px;
	top:1px;
	right:-295%;
	position:absolute;
	z-index:5;
	width:250px;
	display:none;
	overflow:hidden;
}
.hoverimg {width:60px;}
.featurdetail
{
	float:left;
	position:relative;
	margin-top:5px;
	
}
.featurdetail img
{
	width:60px;
	height:60px;
}

#detail
{
	width:100%;
        
}
.imgproductdetail
{
	margin-top:10px;
	padding-bottom:25px;
	width:49%;	
        
}
.imgproductdetail img{
    
    width: 100%;
    overflow: hidden;
}
.txtproductheader
{	
	color:#039;
	float:left;
	font-size:24px;
	font-weight:bolder;
	
}
#detail img
{
	padding-left:4%;
}
.detailspek
{
	float:left;
	width:32%;
	font-size:12px;
	padding-left:5px;
	padding-bottom:20px;
	position:relative;
}

.menudetailproduct
{ width: 100%;}



#tababoutprod
{
    margin-left: 0px;
    float: left;
    width: 20%;
    height: 40px;
    text-align: center;
    font-size: 24px;
    background-color: #0066cc;
    border-radius: 15px 15px 0px 0px;
    color: white;
}
#tababoutprod:hover{cursor: pointer;}
#tabspecprod
{
    margin-left: 0px;
    float: left;
    width: 20%;
    height: 40px;
    text-align: center;
    font-size: 24px;
    background-color: #2c9dd8;
    border-radius: 15px 15px 0px 0px;
    color: white;
    
}
#tabspecprod:hover{cursor: pointer;}
#tabwhereprod
{
    margin-left: 0px;
    float: left;
    width: 20%;
    height: 40px;
    background-color: green;
    border-radius: 0px 15px 0px 0px;
    text-align: center;
    font-size: 24px;
}

#tabwhereprod:hover{cursor: pointer;}
#tababoutprodket
{
    min-height: 100px;
    padding: 10px;
    display:none;
    background-color: #0066cc;
    color: white;
}
#tabspecprodket
{
    min-height: 100px;
    display:block;
    padding: 10px;
    text-align: left;
    background-color: #2c9dd8;
    color: white;
}
#tabwhereprodket
{
    min-height: 100px;
    background-color: green;
    display:none;
    padding: 10px;
}

.buttonclickproduct
{
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: bolder;
     
}


.buttonclickproduct:hover
{
    
    background-color:#2c9dd8; 
    color: white;
}


.detailspek h2 { font-size:14px; color:#039;}
h2 { color:#039;}
.zeecol h2 { font-size:20px; color:#039; text-align: center; font-family: myFirstFont;}
.kontakaddress { color:#039;}
#contenthome
{
	width:100%;
	padding:40px 20px;
}



.content60
{
    width:59.99999%;
    float:left;
}
.content40
{
    width:9.99999%;
    float:left;
}
.contenthomeleft
{
	width:59.99999%;
	float:left;
}
.contenthomeright
{	
	margin-top:10px;
	width:30.9999%;
	float:left;
	margin-bottom:50px;
        margin-left: 30px;
}
/*  NEWPRODUCT HOMEPAGE */
.newproducthomepage
{ 	
	border-top:1px solid #039;
	margin-right:8px; 
	padding-bottom:10px;
	padding-top:10px;
	font-size:14px;
	line-height:18px;
	color:#039;
	width:100%;
}


.homepagenewimg
{ width:30%;
float:left;
margin-right:20px;
border-radius:5px;
border:1px solid #039;
overflow:auto;
}




red {color:#F00;}

.subheaderpage
{
 	width:100%;
	padding-bottom:10px;
	margin-top:-3px;
}

.aboutus
{	
	width:55%;
	text-align:justify;
	float:left;
	margin: 0 0 0 0;
	font-family: myFirstFont, Helvetica, sans-serif, verdana;
	font-size:14px;
	line-height:25px;
	
}
.aboutusfull
{	
	width:90%;
	text-align:justify;
	
	margin: auto;
	font-family: myFirstFont, Helvetica, sans-serif, verdana;
	font-size:14px;
	line-height:25px;
	
}
.aboutuspic  {width: 43%; float:right;}
.aboutuspic img { width:100%; }


@media all and (max-width : 700px) {
.featcontent
{   display: none; }
}


@media all and (max-width : 768px) {
.jajaranfeat {
    margin-top: -200px;
    
}
#maincontent
{
	padding:48px 0px;
}
	
.contenthomeleft
{
	width:100%;
	float:none;
	
}
.contenthomeright
{	
	
	width:100%;
	float:none;
	
}	

.imgindexstaticright
{
    width: 33.222%;
    float: right;
    padding: 8px;
}

.textrightindex
{
    clear: both;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    float: none;
}
.imgindexstaticleft
{
    width: 84%;
    margin-top: 20px;
    float: left;
    margin-left: -40px;
}
.imgindexstaticleftwnt
{
    width: 90%;
    margin-top: 5px;
    float: left;
}

.textleftindex{
    width: 100%;
    color: #2c9dd8;
    float: left;
}
.txtboldbesar{
    font-size: 22px;
    font-weight: bolder;
    
}
.txtfiturindex{
    font-size: 18px;
}
.ntepuguh
{
    display: none;
}


	
#footer
{
	font-size:18px;
	text-align:center;
}


.divfooter 
{
	width:100%;
	float:none;
	padding-top:20px;
        color: black;
	
}
.divfooterrght
{
	width:100%;
	float:none;
	color: black;
        text-align:center;
	
	
}

.cpyfooter
{
	float:none;
	
	margin-bottom:10px;
	font-size:12px;
	font-style:italic;
	width:100%;
	text-align:center;
}

.rightcpyfooter img
{	background-color:#FFF;
	
}
.imgproductdetail
{
	margin-top:10px;
	padding-bottom:25px;
	width:90%;	
}
.imgproductdetail img{
    
    width: 80%;
    overflow: hidden;
}
#tababoutprod
{
    margin-left: 0px;
    float: left;
    width: 33.3333%;
    height: 40px;
    background-color: #0066cc;;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 14px;
    padding-top: 7px;
}

#tabspecprod
{
    margin-left: 0px;
    float: left;
    width: 33.3333%;
    height: 40px;
    background-color: #2c9dd8;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 14px;
    padding-top: 7px;
}

#tabwhereprod
{
    margin-left: 0px;
    float: left;
    width: 33.3333%;
    height: 40px;
    background-color: green;
    border-radius: 0px 15px 0px 0px;
    text-align: center;
    font-size: 18px;
    padding-top: 7px;
}
#contentfeatket
{width: 90%;}
.featcontent img
{
    width: 19.999%;
}


.residentialback {
    display: none;
}
.industrialback {
    display: none;
}

.divfull
{
    height: 180px;
}

.tigarowindex{
    
    font-size: 15px;
}

}

/* ENDDD Footer  */