@font-face {
    font-family: "raleway";
    src: url(fonts/raleway/Raleway-Regular.ttf);
}
@font-face {
    font-family: "open";
    src: url(fonts/Open_Sans/OpenSans-Regular.ttf);
}
@font-face {
    font-family: "futura";
    src: url(fonts/FutuBd.ttf);
}

.imgop{
	opacity: 0.3;
}
.imgop:hover{
	opacity: 1;
}
.bg-tbmenu{
	background-image: url(images/menu/bg-top-atas.png);
	background-repeat: repeat-x;
	height: 46px;
	width: 100%;
	margin-bottom: 20px;
}
.bg-menunyap{background-color: #fff;color:#1065F1; }
.demo-arrow-up{
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
	position: absolute;
	bottom: 0;
	left: 40%;
}
.grow{
	transition:ease-in all 1s;
	-moz-transition:ease-in all 0.5s;
	-webkit-transition:ease-in all 0.5s;
	-o-transition:ease-in all 0.5s;
	opacity: 0.2;
	filter: alpha(opacity=40);

}

.garis-haluspro{border:1px solid#ccc;width: 100%;margin: 5px 0 10px 0}

.grow:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	transition:ease-out all 1s;
	-moz-transition:ease-out all 1s;
	-webkit-transition:ease-out all 1s;
	-o-transition:ease-out all 1s;
	opacity: 1;
}

.anama-pr{ font-family: raleway;font-size: 12px;color: #353434; height: 40px;}

.nama-artikel a {
    font-family: "futura";
    font-size: 16px;
    color: #509c1c;
    text-align: left;
    line-height: 35px;
    /*font-weight: bold;*/
    text-shadow: 1px 2px 1px #ccc;
    margin-bottom: 8px;
}

.nama-artikel a:hover {
    color: #509c1c;
}

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
    .img-dtl-qlty{
	    float: left; margin-right: 15px; margin-bottom: 10px;
    }
    .menu-kat{
	    list-style-type: none;
        margin: 50px 0 0 0;
        padding: 0px;
    }
    .menu-kat li{
	    display: inline;
    }
    .menu-kat li a{
        width: 60px;
        font-family: open;
        font-size: 14px;
        color: #118EA4;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
        margin-left: 10px;
    }
    .menu-kat li a:hover{
        width: 60px;
        font-family: open;
        font-size: 14px;
        color: #036184;
        text-transform: uppercase;
        cursor: pointer;
    }
    .menu-kat-aktif{
        width: 60px;
        font-family: open;
        font-size: 14px;
        color: #118EA4;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
        border-bottom: 1px solid#036184;
    }
    .notfpond{
	    font-family: raleway;
	    text-align: center;
	    font-size: 200px;
	    font-weight: bold;
	    color: #f18c0a;
	    text-transform: uppercase;
	    text-shadow: 1px 5px 2px #000
    }
    .notfpond2{
	    font-family: "raleway";
	    text-align: center;
	    font-size: 48px;
	    font-weight: bold;
	    color: #f18c0a;
	    text-transform: uppercase;
	    text-shadow: 1px 1px 2px #000;
	    margin-top: 50px;
    }
    .topnya{
	    background-color: #f0f0f0;
	    width: 100%;
	    height: auto;
	    padding: 4px 0 10px 0;
	    margin-top: 0px;
    }
    #bg-slider{
	    background-image: url('images/bg_slider.jpg');
	    width: 100%;
	    height: 645px;
	    background-position: center;
	    background-repeat: no-repeat;
    }
    .bg-top{
	    background-image: url('images/bg_top.png');
	    width: 100%;
	    height: 241px;
	    background-repeat: no-repeat;
	    background-position: center;
	    position:absolute;
	    /*margin-top: -30px;*/
	    top: 20px;
	    left: 0px;
    }
    .logo{
	    text-align: left;
	    padding: 20px 5px 0 0;
    }
    .logo-img{
	    margin-left: 0px;
	    width: 145px;
	    height: 138px;
    }
    .tinggi-banner{
	    margin-top: 60px;
	    margin-bottom: 150px;
    }
    .img-banner{
	    width: 100%;
    }
    .kotak-banner{
	    width: 60%;
	    height: auto;
	    position: relative;
	    margin-top: -170px;
	    margin-left: 20px;
    }
    .nama-banner{
	    font-family: "raleway";
	    font-size: 30px;
	    color: #0169b6;
	    text-align: left;
	    line-height: 35px;
	    font-weight: bold;
	    text-shadow: 1px 2px 1px #0169b6;
	    margin-bottom: 15px;
    }
    .bndra-1{
		width: 25px;
	}
    .nama-qlty{
	    font-family: "raleway";
	    font-size: 16px;
	    color: #509c1c;
	    text-align: left;
	    line-height: 35px;
	    font-weight: bold;
	    text-shadow: 1px 2px 1px #ccc;
	    margin-bottom: 8px;
	    margin-top: 0px;
    }
    .nama-artikel a {
        font-family: "futura";
	    /*font-family: "raleway";*/
	    font-size: 16px;
	    color: #509c1c;
	    text-align: left;
	    line-height: 35px;
	    font-weight: bold;
	    text-shadow: 1px 2px 1px #ccc;
	    margin-bottom: 8px;
    }
    .nama-artikel a:hover {
        color: #509c1c;
    }
    .img-qty{
	    float: left;
	    width: 230px;
	    height: 160px;
	    margin-right: 20px;
	    margin-bottom: 10px;
    }
    .link-banner{
	    font-family: "raleway";
	    font-size: 13px;
	    color: #0169b6;
	    text-decoration: none;
    }
    .link-banner:hover{
	    font-family: "raleway";
	    font-size: 13px;
	    color: #0169b6;
	    text-decoration: none;
	    color: #76cd3a
    }
    .imgab {
	    background-image: url('images/imgab.png');
	    width: 100%;
	    height: 200px;
	    text-align: left;
	    background-repeat: no-repeat;
    }
    .wel{
	    font-family: "raleway";
	    font-size: 35px;
	    color: #040406;
	    text-align: left;
	    margin-bottom: 10px;
    }
    .garis-wel{
	    border:1px solid#60b61c;
	    width: 100%;
	    margin-bottom: 10px;
    }
    .garis-wel2{
	    border:2px solid#60b61c;
	    width: 14%;
	    margin-top: -10px;
	    margin-bottom: 15px;
    }
    .garis-wel3{
	    border:1px solid#60b61c;
	    width: 40%;
	    margin-bottom: 10px;
    }
    .garis-wel4{
	    border:1px solid#60b61c;
	    width: 60%;
	    margin-bottom: 10px;
    }
    .ket-penjelas{
	    font-family: open;
	    color: #676767;
	    font-size: 13px;
	    text-align: left;
	    line-height: 25px;
	    margin-bottom: 35px;
    }
    .ket-penjelas a{
	    font-family: open;
	    color: #525252;
	    font-size: 13px;
	    text-align: left;
	    line-height: 25px;
	    text-decoration: none;
    }
    .ket-penjelas a:hover{
	    /*font-family: open;*/
	    font-family: "raleway";
	    color: #676767;
	    font-size: 13px;
	    text-align: left;
	    line-height: 25px;
	    color: #ebb704;
    }
    .ket-penjelas-2{
	    /*font-family: open;*/
	    font-family: "raleway";
	    color: #7bd5ff;
	    font-size: 13px;
	    text-align: justify;
	    line-height: 25px;
	    margin-bottom: 18px;
    }
    .ket-penjelas-3{
	    /*font-family: open;*/
	    font-family: "raleway";
	    color: #676767;
	    font-size: 13px;
	    text-align: justify;
	    line-height: 25px;
    }
    #bg-knol{
	    background-image: url('images/bg_knol.png');
	    width: 100%;
	    height: 830px;
	    background-repeat: no-repeat;
	    background-position: center;
	    margin-top: 80px;
	    margin-bottom: 25px;
    }
    .kotak-knol{
	    width: 375px;
	    height: 100px;
	    margin:305px 0 0 105px;
	    padding-left: 40px;
    }
    .judul-knol{
	    color: #7bd5ff;
	    font-family: "raleway";
	    font-size: 28px;
	    margin-bottom: 10px;
    }
    .garis-knol{
	    border:1px solid#fff;
	    width: 100%;
	    margin-bottom: 10px;
    }
    .garis-knol2{
	    border:2px solid#fff;
	    width: 14%;
	    margin-top: -10px;
	    margin-bottom: 15px;
    }
    .img-hoverknol{
		width: 29px;
	}
    .judul-lts{
	    color: #404040;
	    font-family: "raleway";
	    font-size: 35px;
	    margin-bottom: 10px;
    }
    .judul-artikel{
	    /*font-family: open;*/
	    font-family: "raleway";
	    font-size: 14px;
	    text-align: left;
	    margin-bottom: 10px;
	    color: #393939;
	    font-weight: bold;
    }
    .judul-artikel a{
	    /*font-family: open;*/
	    font-family: "raleway";
	    font-size: 14px;
	    text-align: left;
	    margin-bottom: 10px;
	    color: #393939;
	    font-weight: bold;
    }
    .judul-artikel a:hover{
	    font-family: open;
	    font-size: 14px;
	    text-align: left;
	    margin-bottom: 10px;
	    color: #60b61c;
	    font-weight: bold;
    }
    .img-artikel{
	    width: 100%;
    }
    .link-artikel{
	    font-family: open;
	    font-size: 13px;
	    text-align: left;
	    color: #013fb6;
	    text-align: left;
	    font-weight: bold;
	    transition:ease-in all 1s;
	    -moz-transition:ease-in all 1s;
	    -webkit-transition:ease-in all 1s;
	    -o-transition:ease-in all 1s;
	    line-height: 20px;
	    text-decoration: none;
	    border-bottom: 1px solid#013fb6;
    }
    .link-artikel:hover{
	    font-family: open;
	    font-size: 13px;
	    text-align: left;
	    color: #60b61c;
	    text-align: left;
	    font-weight: bold;
	    text-decoration: none;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
	    border-bottom: 1px solid#60b61c;
	    line-height: 20px;
    }
    .jarak-btnnya{
	    padding-top: 15px;
	    padding-bottom: 30px;
    }
    .grow{
	    transition:ease-in all 1s;
	    -moz-transition:ease-in all 0.5s;
	    -webkit-transition:ease-in all 0.5s;
	    -o-transition:ease-in all 0.5s;
    }
    .grow:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
	    transition:ease-out all 1s;
	    -moz-transition:ease-out all 1s;
	    -webkit-transition:ease-out all 1s;
	    -o-transition:ease-out all 1s;
    }
    .jarak-kontak{
	    margin-top: 40px;
    }
    .alamat-depan{
	    font-family: open;
	    color: #676767;
	    font-size: 13px;
	    text-align: left;
	    line-height: 25px;
	    margin-top: 20px;
    }
    .bg-eco{
	    background-image: url('images/bg-eko.png');
	    background-repeat: no-repeat;
	    width: 278px;
	    height: 111px;
	    margin-top: 63px;
    }
    .kotak-map{
	    width: 360px;
	    height: 550px;
	    text-align: right;
	    margin-top: 30px;
    }
    .bg-send{
	    background-image: url('images/bg-kontak.png');
	    width: 282px;
	    height: 420px;
	    position: relative;
	    background-repeat: no-repeat;
	    margin: -480px 0 0 0;
	    padding-top: 10px;
    }
    .bg-send-2{
	    background-image: url('images/bg-kontak.png');
	    width: 282px;
	    height: 420px;
	    position: relative;
	    background-repeat: no-repeat;
	    margin: -480px 0 0 0;
	    padding-top: 35px;
    }
    .kotak-sendnya{
	    width: 200px;
	    height: auto;
	    margin-left: 30px;
    }
    .text-sendnya{
	    color: #7bd5ff;
	    font-family: open;
	    font-size: 13px;
	    text-align: left;
	    line-height: 20px;
    }
    .btn-sent{
	    background-image: url('images/menu/send.png');
	    width:221px;
	    height: 51px;
	    background-repeat: no-repeat;
	    margin-top: 35px;
	    transition:ease-in all 2s;
	    -moz-transition:ease-in all 2s;
	    -webkit-transition:ease-in all 2s;
	    -o-transition:ease-in all 2s;
    }
    .btn-sent:hover{
	    background-image: url('images/menu/send2.png');
	    width:221px;
	    height: 51px;
	    background-repeat: no-repeat;
	    margin-top: 35px;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .judul-sennya{
	    color: #fff;
	    font-family: "raleway";
	    font-size: 25px;
	    margin-bottom: 10px;
	    line-height: 30px;
    }
    .bg-footer {
        background-color: #e0e0e0;
        width: 100%;
        height: auto;
        margin-top: 0;
        padding-top: 0;
    }
    .bg-footerhps{
	    background-color: #e0e0e0;
	    width: 100%;
	    height: 100px;
	    padding: 0 0 10px 0;
	    /*margin-top: 250px;*/
	    margin-top: 90px;
        padding-top: 90px;
        display: inline-block;
    }
    .bg-footer-2{
	    background-color: #e0e0e0;
	    width: 100%;
	    height: 100px;
	    padding: 0 0 10px 0;
	    margin-top: 0px;
    }
    .menu-foter{
	    width: 100%;
	    margin: auto;
	    /*margin-top: -50px;*/
	    /*margin-bottom: 30px;*/
	    padding-top: 30px;
        padding-bottom: 30px;
    }
    .td-footer{
	    padding: 0px 30px 0 30px;
    }
    .img-footer{}
    .link-footer{
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
	    text-align: center;
    }
    .link-footer2{
	    font-family: open;
	    font-size: 12px;
	    color: #808080;
	    text-decoration: none;
	    text-align: center;
	    text-transform: uppercase;
    }
    .link-aktif{
	    font-family: open;
	    font-size: 12px;
	    color: #000;
	    font-weight: bold;
	    text-decoration: none;
	    text-align: center;
	    text-transform: uppercase;
    }
    .jraknya-foter{
	    padding-top: 18px;
    }
    .footer-bawah{
	    background-color: #d0d0d0;
	    width: 100%;
	    height: auto;padding: 10px 0 10px 0;
    }
    .text-copy{
	    color: #757575;
	    font-family: open;
	    font-size: 12px;
    }
    .text-copy a{
	    color: #1d8ac0;
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
    }
    .text-copy a:hover{
	    color: #0068b5;
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
    }
    /*====ABOUT US===*/
    #bg-about{
	    /*background-image: url('images/bg-aboutus.png');*/
	    width: 100%;
	    height: 440px;
	    background-repeat: no-repeat;
	    background-position: center;
	    margin-top: 170px;
	    padding-top: 120px;
    }
    #bg-kontak{
	    background-image: url('images/bg-kontaknya.png');
	    width: 100%;
	    height: 318px;
	    background-repeat: no-repeat;
	    background-position: center;
	    margin-top: 15px;
	    padding-top: 220px;
    }
    #bg-produk{
	    background-image: url('images/bg-produk.png');
	    width: 100%;
	    height: 318px;
	    background-repeat: no-repeat;
	    background-position: center;
	    margin-top: 15px;
	    padding-top: 220px;
    }
    .judul-ab{
	    font-family: futura;
	    color: #fff;
	    font-size: 40px;
	    font-weight: bold;
	    text-transform: uppercase;
	    text-align: left;
	    margin-bottom: 0px;
	    margin-left: -15px;
	    text-shadow: 1px 1px 1px #ccc;
    }
    .judul-title{
	    font-family: open;
	    color: #1d1d1d;
	    font-size: 12px;
	    text-align: left;
        /* border: solid 1px #000; */
        padding: 10px 0px;
        margin: 0px;
    }
    .judul-title a{
	    font-family: open;
	    color: #959595;
	    font-size: 12px;
	    text-align: left;
	    text-decoration: none;
        padding: 0px;
        margin: 0px;
    }
    .judul-title a:hover{
	    font-family: open;
	    color: #509c1c;
	    font-size: 12px;
	    text-align: left;
	    text-decoration: none;
        padding: 0px;
        margin: 0px;
    }
    .btn-home{
	    background-image: url('images/menu/btn-home.png');
	    background-repeat: no-repeat;
	    width: 38px;
	    height: 44px;
	    margin: 10px 0px 20px 0px;
    }
    .btn-home:hover{
	    background-image: url('images/menu/btn-home2.png');
	    background-repeat: no-repeat;
	    width: 38px;
	    height: 44px;
    }
    .marker{
	    font-size: 60px;
	    color: #fff;
	    margin-left: 20px;
    }
    .input{
	    border-left: none;
	    border-right: none;
	    border-top: none;
	    background: none;
	    box-shadow: none;
	    font-family: open;
	    color: #0169b6;
	    font-size: 12px;
	    text-align: left;
	    padding-left: 2px;
    }
    .input:focus{
	    background: none;
	    box-shadow: none;
    }
    .jarak-input{
	    padding-bottom: 10px;
    }
    .kotak-qlty{
        margin-bottom: 50px;
	    /*margin-bottom: 30px;*/
	    padding-bottom: 10px;
	    height: auto;
	    /*height: 490px;*/
    }
    .kotak-qlty2{
	    margin-bottom: 30px;
	    padding-bottom: 10px;
	    height: 490px;
    }
    .kotak-text{
	    width: 100%;
	    height: 100px;
	   display: contents;
    }
    .read{
	    padding: 10px 15px;
	    text-align: center;
	    border:1px solid#ccc;
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .read:hover{
	    padding: 10px 15px;
	    text-align: center;
	    border:1px solid#509c1c;
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
	    background-color: #509c1c;
	    color: #fff;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .read-2{
	    padding: 5px 6px;
	    text-align: center;
	    border:1px solid#ccc;
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .read-2:hover{
	    padding: 5px 6px;
	    text-align: center;
	    border:1px solid#509c1c;
	    font-family: open;
	    font-size: 12px;
	    text-decoration: none;
	    background-color: #509c1c;
	    color: #fff;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .paddinggam{padding: 5px;}
    .tinggi-gam{width: 100%;height: 150px;}
    .img-produk{
	    border:3px solid#b6b6b6;
	    padding: 5px;
	    text-align: center;
	    margin-bottom: 8px;
	    width: 100%;
	    height: 120px;
	    border-radius: 30px 0 30px 0;
	    transition:ease-in all 1s;
	    -moz-transition:ease-in all 1s;
	    -webkit-transition:ease-in all 1s;
	    -o-transition:ease-in all 1s;
    }
    .img-produk:hover{
	    border:3px solid#0CD05F;
	    border-radius: 30px 0 30px 0;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .img-produk-pro{
	    /*border:1px solid#dedede;*/
	    padding: 5px;
	    text-align: center;
	    margin-bottom: 8px;
	    width: 100%;
	    transition:ease-in all 1s;
	    -moz-transition:ease-in all 1s;
	    -webkit-transition:ease-in all 1s;
	    -o-transition:ease-in all 1s;
    }
    .img-produk-pro:hover{
	    border:1px solid#ccc;
	    transition:ease-out all 2s;
	    -moz-transition:ease-out all 2s;
	    -webkit-transition:ease-out all 2s;
	    -o-transition:ease-out all 2s;
    }
    .nama-prokecil{
	    color: #0266a5;
	    font-family: open;
	    font-size: 12px;
	    font-weight: bold;
	    text-transform: uppercase;
	    text-decoration: none;
	    margin-bottom: 15px;
    }
    .judul-spek{
    	color: #0169b6;
	    font-family: "raleway";
	    font-size: 18px;
	    font-weight: bold;
	    margin-bottom: 15px;
    }
    .kotak-spek{
	    border:1px solid#0169b6;
	    padding: 10px;
	    width: 400px;
	    height: auto;
    }
    .img-dtl{
	    text-align: center;
    }
    .nama-produknya{
	    color: #404040;
	    font-family: "raleway";
	    font-size: 35px;
	    margin-top: 25px;
	    margin-bottom: 15px;
    }
    .tgl-artikel{
	    color: #a0a0a0;
	    font-family: Times New Roman;
	    font-size: 12px;
	    margin-top: 10px;
	    margin-bottom: 0px;
    }
    .img-artikel{
	    width: 100%;
	    height: 280px;
    }
    .img-artikel-2{
	    width: 100%;
	    height: 250px;
    }
    .img-prodev-2{
	    width: 100%;
	    height: 320px;
    }
    .img-artikel-kecil{
	    width: 100%;
	    height: 80px;
    }
    .link-artikel{
	    font-size: 12px;
	    color: #474746;
	    text-decoration: none;
    }
    /*menu==================*/
    .float{
	    margin-left: 110px;
	    margin-top: 22px;
    }
    .float-2{
        margin:20px 0px 0px 0px;
    }
    .pilih-bahas{
	    font-family: open;
	    color: #696969;
	    font-size: 12px;
	    text-align: left;
	    margin-right: 50px;
    }
    .tagline{
	    font-family: open;
	    font-size: 13px;
	    color: #1e1e1e;
	    text-align: right;
	    padding: 5px 15px 5px 0;
	    line-height: 20px;
	    margin-top: 60px;
	    margin-right: 15px;
    }
    .sosmed{
    width: auto;
    }
    .sosmed ul{
        margin: 0 auto;
        margin-top:60px;
    }
    .sosmed li{
        font-family: open;
	    text-align: left;
	    margin:0px 5px;
        width: 13%;
        display: inline;
    }
    .sosmed li a{
        font-size: 14px;
        color: #fff;
    }
    .sosmed li a:hover{
        color: #FF0;
    }
    .bndra{
	    padding: 5px;
    }
    .atas-bndra{
	    padding-top: 15px;
    }
    .kotak-prodev{
	    border:1px solid#d6d3d3;
	    padding: 5px;
	    height: auto;
    }
    .img-prodev{
	    height: 250px;
	    width: 100%;
    }
    .img-prodev-dtl{
	    float: left;
	    margin-right: 25px;
	    margin-bottom: 15px;
    }
    .nama-dtl-prod{
	    font-family: open;
	    font-size: 20px;
	    color: #5c5b5b;
	    font-weight: bold;
	    text-transform: capitalize;
	    margin-bottom: 10px;
	    margin-top: -5px;
    }
    .lainnya{
	    margin-top: 0px;
    }
    .lainnya-2{
	    font-size: 16px;
    }
    .judul-artikel{
	    font-family: raleway;
	    font-size: 24px;
	    color: #2e2e2e;
	    margin: 10px 0 -5px 0;
    }
    .judul-artikel-3{
	    font-family: raleway;
	    font-size: 20px;
	    color: #2e2e2e;
	    margin: 10px 0 -5px 0;
    }
    .judul-artikel-2{
	    font-family: raleway;
	    font-size: 14px;
	    color: #2e2e2e;
	    font-weight: bold;
	    margin: 0px 0 -5px 0;
    }
    .judul-artikel-2a{
	    font-family: "raleway";
	    font-size: 16px;
	    color: #2e2e2e;
	    font-weight: bold;
	    margin: 0px 0 10px 0;
    }
    .judul-artikel-3a{
	    /*font-family: raleway;*/
	    font-family: "raleway";
	    font-size: 20px;
	    color: #2e2e2e;
	    margin: 10px 0 15px 0;
    }
    .rata{
	    text-align: justify;
    }
    .kotak-ref{
	    width: 100%;
	    height: auto;
	    padding: 6px;
	    border:1px solid#cdcdcd;
	    background-color: #fff;
	    margin-bottom: 20px;
    }
    .img-menu{
	    width: 44px;
	    height: 43px;
    }
    .sedeng{
	    display: none;
    }
    .menujarak{
	    padding: 0 12px 0 12px;
    }
    .jarak-bendera{
		margin-right: -25px;
	}
    .kecil{display: none;}
    .slider{
		position: relative;
        top: 40px;
        left:5px;
        width:1300px;
        height: 520px;
        position: center;
        margin: auto;
	}
    .kotak-vidio {
        background-image: url('images/tablet.jpg');
        width: 100%;
        height: 362px;
        background-repeat: no-repeat;
        margin: auto;
        padding-top: 38px;
        padding-left: 10px;
    }
}


.nama-kecil{font-family: open;font-size: 12px; font-style: italic;color: #8E0404; text-align: left; margin: -6px 0 15px 0}
/*===plugin lain lain=============*/
.youtube-container { display: block; margin: auto; width: 100%; max-width: 450px; height: 89%; border:1px solid #000;}
.youtube-player { display: block; width: 100%; height: 900px;background-color: #000; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height:auto; position: absolute; top: 0; left: 0; }
.atasbawah
{
position:relative;
animation:atasbawaha 1s infinite;
-moz-animation:atasbawaha 1s infinite; /* Firefox */
-webkit-animation:atasbawaha 1s infinite; /*Safari and Chrome*/
}
.atasbawah:hover
{
position:relative;
animation:atasbawah 2s infinite;
-moz-animation:atasbawah 2s infinite; /* Firefox */
-webkit-animation:atasbawah 2s infinite; /*Safari and Chrome*/
}
@keyframes atasbawah
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

@-moz-keyframes atasbawah /* Firefox */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

@-webkit-keyframes atasbawah /* Safari and Chrome */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

/*=======================layar laptop==========================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .sosmed ul{
    margin-top: 45px;
  }

  .sosmed li{
    font-family: open;
  	text-align: left;
  	margin:0px 1px;
    width: 11.3%;
    display: inline;
  }

  .sosmed li a{
    font-size: 11px;
    color: #fff;
  }

	.img-dtl-qlty{
		width: 100%;
		margin-bottom: 10px;
	}
	.menujarak{
		padding: 0 10px 0 10px;

	}
	.jarak-bendera{
		margin-right: -45px;
	}
	.nama-kecil{font-family: open;font-size: 12px; font-style: italic;color: #8E0404; text-align: left; margin: -6px 0 15px 0}
	.menu-kat{
		list-style-type: none;
	    margin: 50px 0 0 0;
	    padding: 0px;
	}
	.menu-kat li{
		display: inline;

	}
	.menu-kat li a{
	    width: 60px;
	    font-family: open;
	    font-size: 12px;
	    color: #118EA4;
	    text-decoration: none;
	    text-transform: uppercase;
	    cursor: pointer;
	    margin-left: 10px;
	}
	.menu-kat li a:hover{
	    width: 60px;
	    font-family: open;
	    font-size: 12px;
	    color: #036184;
	    text-transform: uppercase;
	    cursor: pointer;
	}
	.menu-kat-aktif{
	    width: 60px;
	    font-family: open;
	    font-size: 14px;
	    color: #118EA4;
	    text-decoration: none;
	    text-transform: uppercase;
	    cursor: pointer;
	    border-bottom: 1px solid#036184;
	}
	.notfpond{
		font-family: raleway;
		text-align: center;
		font-size: 200px;
		font-weight: bold;
		color: #f18c0a;
		text-transform: uppercase;
		text-shadow: 1px 5px 2px #000
	}
	.notfpond2{
		font-family: "raleway";
		text-align: center;
		font-size: 48px;
		font-weight: bold;
		color: #f18c0a;
		text-transform: uppercase;
		text-shadow: 1px 1px 2px #000;
		margin-top: 50px;
	}
	.besar{
		display: none;
	}

	.kecil{display: none;}
	.topnya{
		background-color: #f0f0f0;
		width: 100%;
		height: auto;
		padding: 4px 0 20px 0;
		margin-top: 0px;
	}
	.float{
		margin-left: 0px;
		margin-top: 15px;
		text-align: right;

	}

  .float-2{
    margin:12px 0px 0px 0px;
  }

	.bg-top{
		background-image: url('images/bg-top-sm.png');
		width: 100%;
		height: 181px;
		background-repeat: no-repeat;
		background-position: center;
		position:absolute;
		/*margin-top: -30px;*/
		top: 20px;
	}
	.logo{
		text-align: left;
		padding: 20px 5px 0 0px;
	}
	.logo-img{
		margin-left: 0px;
		width: 100px;
		height: 95px;
	}
	.img-menu{
		width: 22px;
		height:32px;
	}

  .tagline{
  	font-size: 13px;
  	padding: 5px 15px;
  	margin-top: 45px;
  	margin-right: 15px;
  }
	.pilih-bahas{
		font-family: open;
		color: #696969;
		font-size: 12px;
		text-align: left;
		margin-right: 40px;
		margin-bottom: 8px;
	}



	.ket-penjelas{
	font-family: open;
	color: #676767;
	font-size: 13px;
	text-align: left;
	line-height: 25px;
}
.ket-penjelas a{
	font-family: open;
	color: #525252;
	font-size: 13px;
	text-align: left;
	line-height: 25px;
	text-decoration: none;
}
.ket-penjelas a:hover{
	font-family: open;
	color: #676767;
	font-size: 13px;
	text-align: left;
	line-height: 25px;
	color: #ebb704;
}
.ket-penjelas-2{
	font-family: open;
	color: #7bd5ff;
	font-size: 13px;
	text-align: justify;
	line-height: 25px;
	margin-bottom: 18px;
}
.ket-penjelas-3{
	font-family: open;
	color: #676767;
	font-size: 13px;
	text-align: justify;
	line-height: 25px;

}
	#bg-knol{
		background-image: url('images/bg_knol.png');
		width: 100%;
		height: 611px;
		background-repeat: no-repeat;
		background-position: center;
		margin-top: 80px;
		margin-bottom: 25px;
	}
	.kotak-knol{
		width: 290px;
		height: 90px;
		margin:230px 0 0 0px;
		padding-left: 40px;
	}
	.judul-knol{
		color: #7bd5ff;
		font-family:raleway;
		font-size: 26px;
		margin-bottom: 10px;
	}
	.garis-knol{
		border:1px solid#fff;
		width: 100%;
		margin-bottom: 10px;
	}
	.garis-knol2{
		border:2px solid#fff;
		width: 14%;
		margin-top: -10px;
		margin-bottom: 15px;
	}
	.img-hoverknol{
		width: 20px;
	}
	.judul-lts{
		color: #404040;
		font-family:raleway;
		font-size: 35px;
		margin-bottom: 10px;
	}
	.judul-artikel{
		font-family: open;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
		color: #393939;
		font-weight: bold;
	}
	.judul-artikel a{
		font-family: open;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
		color: #393939;
		font-weight: bold;
	}
	.judul-artikel a:hover{
		font-family: open;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
		color: #60b61c;
		font-weight: bold;
	}
	.wel{
		font-family:raleway;
		font-size: 35px;
		color: #040406;
		text-align: left;
		margin-bottom: 10px;

	}
	.garis-wel{
		border:1px solid#60b61c;
		width: 100%;
		margin-bottom: 10px;
	}
	.garis-wel2{
		border:2px solid#60b61c;
		width: 14%;
		margin-top: -10px;
		margin-bottom: 15px;

	}
	.garis-wel3{
		border:1px solid#60b61c;
		width: 40%;
		margin-bottom: 10px;
	}
	.garis-wel4{
		border:1px solid#60b61c;
		width: 60%;
		margin-bottom: 10px;
	}
	.jarak-about{
		padding-top: 20px;
	}
	.tinggi-banner{
	margin-top: 60px;
	margin-bottom: 150px;
	}
	.img-banner{
		width: 100%;
	}
	.kotak-banner{
		width: 60%;
		height: auto;
		position: relative;
		margin-top: -170px;
		margin-left: 20px;
	}
	.nama-banner{
		font-family:raleway;
		font-size: 30px;
		color: #0169b6;
		text-align: left;
		line-height: 35px;
		font-weight: bold;
		text-shadow: 1px 2px 1px #0169b6;
		margin-bottom: 15px;


	}
	.link-banner{
		font-family:raleway;
		font-size: 13px;
		color: #0169b6;
		text-decoration: none;
	}
	.link-banner:hover{
		font-family:raleway;
		font-size: 13px;
		color: #0169b6;
		text-decoration: none;
		color: #76cd3a
	}
	.imgab{
		background-image: url('images/imgab.png');
		width: 100%;
		height: 200px;
		text-align: left;
		background-repeat: no-repeat;
	}
	.read{
		padding: 10px 15px;
		text-align: center;
		border:1px solid#ccc;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.read:hover{
		padding: 10px 15px;
		text-align: center;
		border:1px solid#509c1c;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		background-color: #509c1c;
		color: #fff;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.read-2{
		padding: 5px 6px;
		text-align: center;
		border:1px solid#ccc;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.read-2:hover{
		padding: 5px 6px;
		text-align: center;
		border:1px solid#509c1c;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		background-color: #509c1c;
		color: #fff;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.img-artikel{
		width: 100%;
		/* height: 170px; */
	}
	.kotak-map{
	width: 250px;
	height: 350px;
	text-align: right;
	margin-top: 30px;

}
.bg-send{
	background-image: url('images/bg-kontak2.png');
	width: 180px;
	height: 268px;
	position: relative;
	background-repeat: no-repeat;
	margin: -280px 0 0 0px;
	padding-top: 130px;
}
.bg-send-2{
	background-image: url('images/bg-kontak2.png');
	width: 180px;
	height: 268px;
	position: relative;
	background-repeat: no-repeat;
	margin: -280px 0 0 0px;
	padding-top: 40px;
}
.kotak-sendnya{
	width: 160px;
	height: auto;
	margin-left: 10px;


}
.text-sendnya{
	color: #7bd5ff;
	font-family: open;
	font-size: 12px;
	text-align: left;
	line-height: 18px;
}
.btn-sent{
	background-image: url('images/menu/senda.png');
	width:150px;
	height: 35px;
	background-repeat: no-repeat;
	margin-top: 25px;
	transition:ease-in all 2s;
	-moz-transition:ease-in all 2s;
	-webkit-transition:ease-in all 2s;
	-o-transition:ease-in all 2s;
}
.btn-sent:hover{
	background-image: url('images/menu/send2a.png');
	width:150px;
	height: 35px;
	background-repeat: no-repeat;
	margin-top: 25px;
	transition:ease-out all 2s;
	-moz-transition:ease-out all 2s;
	-webkit-transition:ease-out all 2s;
	-o-transition:ease-out all 2s;
}
.judul-sennya{
	color: #fff;
	font-family:raleway;
	font-size: 25px;
	margin-bottom: 10px;
	line-height: 30px;
}
	.bg-footer{
		background-color: #e0e0e0;
		width: 100%;
		height: 100px;
		padding: 0 0 10px 0;
		margin-top: 0;
		/*margin-top: 200px;*/
	}
	.bg-footer-2{
		background-color: #e0e0e0;
		width: 100%;
		height: 100px;
		padding: 0 0 10px 0;
		margin-top: 0px;
	}
	.menu-foter{
		width: 100%;
		margin: auto;
		margin-top: -50px;
		margin-bottom: 0px;
		padding-bottom: 20px;

	}
	.td-footer{
		padding: 0px 8px 0 8px;
	}
	.img-footernya{
		width:70px;
	}
	.img-footernya2{
		width:55px;
	}
	.img-footernya3{
		width:115px;
		margin-right: -5px;
	}
	.img-footernya4{
		width:58px;
	}
	.img-footernya5{
		width:50px;
	}
	.img-footernya6{
		width:65px;
	}
	.link-footer{
		font-family: open;
		font-size: 12px;

		text-decoration: none;
		text-align: center;
	}
	.link-footer2{
		font-family: open;
		font-size: 12px;
		color: #808080;
		text-decoration: none;
		text-align: center;
		text-transform: uppercase;
	}
	.link-aktif{
		font-family: open;
		font-size: 12px;
		color: #000;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
		text-transform: uppercase;
	}
	.jraknya-foter{
		padding-top: 20px;
	}
	.footer-bawah{
		background-color: #d0d0d0;
		width: 100%;
		height: auto;
		padding: 10px 0 10px 0;
	}
	.text-copy{
		color: #757575;
		font-family: open;
		font-size: 12px;
	}
	.text-copy a{
		color: #1d8ac0;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
	}
	.text-copy a:hover{
		color: #0068b5;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
	}
	.jarak-kontak{
		margin-top: 40px;

	}
	.alamat-depan{
		font-family: open;
		color: #676767;
		font-size: 13px;
		text-align: left;
		line-height: 25px;
		margin-top: 20px;
	}
	.bg-eco{
		background-image: url('images/bg-eko.png');
		background-repeat: no-repeat;
		width: 278px;
		height: 111px;
		margin-top: 63px;
	}
	.table-foter{
		margin-top: 10px;
	}
	/*====ABOUT US===*/
#bg-about{
	//background-image: url('images/bg-aboutus2.png');
	width: 100%;
	height: 239px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 100px;
	padding-top: 120px;
}
#bg-kontak{
	background-image: url('images/bg-kontaknya.png');
	width: 100%;
	height: 318px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 15px;
	padding-top: 220px;
}
#bg-produk{
	background-image: url('images/bg-produk.png');
	width: 100%;
	height: 318px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 15px;
	padding-top: 220px;
}
.judul-ab{
	font-family: futura;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	margin-bottom: 5px;
	text-shadow: 1px 1px 1px #000;
  padding: 0px;
}
.judul-title{
	font-family: open;
	color: #1d1d1d;
	font-size: 12px;
	text-align: left;
  /* border: solid 1px #000; */
}
.judul-title a{
	font-family: open;
	color: #959595;
	font-size: 12px;
	text-align: left;
	text-decoration: none;
}
.judul-title a:hover{
	font-family: open;
	color: #509c1c;
	font-size: 12px;
	text-align: left;
	text-decoration: none;
}
.btn-home{
	background-image: url('images/menu/btn-homea.png');
	background-repeat: no-repeat;
	width: 25px;
	height: 29px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.btn-home:hover{
	background-image: url('images/menu/btn-homea2.png');
	background-repeat: no-repeat;
	width: 25px;
	height: 29px;
}
.jarak-yutube{
	margin-top: -150px;
	margin-bottom: 150px;
}
.kotak-prodev{
	border:1px solid#d6d3d3;
	padding: 5px;
	height: auto;


}
.img-prodev{
	height: 150px;
	width: 100%;


}
.img-prodev-dtl{
	float: left;
	margin-right: 25px;
	margin-bottom: 15px;
}
.nama-dtl-prod{
	font-family: open;
	font-size: 20px;
	color: #5c5b5b;
	font-weight: bold;
	text-transform: capitalize;
	margin-bottom: 10px;
	margin-top: -5px;

}
.lainnya{
	margin-top: 0px;

}
.nama-qlty{
	font-family:raleway;
	font-size: 16px;
	color: #509c1c;
	text-align: left;
	line-height: 35px;
	font-weight: bold;
	text-shadow: 1px 2px 1px #ccc;
	margin-bottom: 8px;
	margin-top: 0px;

}
.nama-artikel{
	font-family: "futura";
	font-size: 16px;
	color: #509c1c;
	text-align: left;
	line-height: 35px;
	/*font-weight: bold;*/
	text-shadow: 1px 2px 1px #ccc;
	margin-bottom: 8px;


}
.img-qty{
	float: left;
	width: 230px;
	height: 160px;
	margin-right: 20px;
	margin-bottom: 10px;
}
.link-banner{
	font-family:raleway;
	font-size: 13px;
	color: #0169b6;
	text-decoration: none;
}
.link-banner:hover{
	font-family:raleway;
	font-size: 13px;
	color: #0169b6;
	text-decoration: none;
	color: #76cd3a
}
.img-produk{
	border:3px solid#b6b6b6;
	padding: 2px;
	text-align: center;
	margin-bottom: 6px;
	width: 130%;
	border-radius: 30px 0 30px 0;
	transition:ease-in all 1s;
	-moz-transition:ease-in all 0.5s;
	-webkit-transition:ease-in all 0.5s;
	-o-transition:ease-in all 0.5s;
}
.img-produk:hover{
	border-radius: 30px 0 30px 0;
	-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	transition:ease-out all 1s;
	-moz-transition:ease-out all 1s;
	-webkit-transition:ease-out all 1s;
	-o-transition:ease-out all 1s;
	border:3px solid#52930C;
}
.nama-prokecil{
	color: #0266a5;
	font-family: open;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 15px;
	display: none;
}
.judul-spek{
	color: #0169b6;
	font-family: raleway;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 15px;
}
.kotak-spek{
	border:1px solid#0169b6;
	padding: 10px;
	width: 100%;
	height: auto;
}
.img-dtl{
	text-align: center;
	width: 80%;

}
.nama-produknya{
	color: #404040;
	font-family:raleway;
	font-size: 35px;
	margin-top: 25px;
	margin-bottom: 15px;
}

.tgl-artikel{
	color: #a0a0a0;
	font-family: Times New Roman;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 0px;
}
.img-artikel{
	width: 100%;
	/* height: 280px; */

}
.img-artikel-sm{
	width: 100%;
	/* height: 155px; */

}
.img-artikel-2{
	width: 100%;
	height: 230px;

}
.img-prodev-2{
	width: 100%;
	height: 320px;
	margin-bottom: 10px;

}
.img-artikel-kecil{
	width: 100%;
	/* height: 80px; */

}
.link-artikel{
	font-size: 12px;
	color: #474746;
	text-decoration: none;

}
.kotak-qlty{
	margin-bottom: 30px;
	padding-bottom: 10px;
	height: 480px;
}
.kotak-qlty2{
	margin-bottom: 30px;
	padding-bottom: 10px;
	height: 480px;
}
.kotak-text{
	width: 100%;
	height: 100px;
}
.kotak-text-xs{
	width: 100%;
	height: 120px;
}

.kotak-ref{
	width: 100%;
	height: auto;
	padding: 6px;
	border:1px solid#cdcdcd;
	background-color: #fff;
	margin-bottom: 20px;
}
	.input{
		border-left: none;
		border-right: none;
		border-top: none;
		background: none;
		box-shadow: none;
		font-family: open;
		color: #0169b6;
		font-size: 12px;
		text-align: left;
		padding-left: 2px;
	}
	.input:focus{
		background: none;
		box-shadow: none;

	}
	.jarak-input{
		padding-bottom: 10px;
	}
	.marker{
		font-size: 50px;
		color: #fff;
		margin-left: 20px;
	}
	.lainnya-2{
		font-size: 14px;
	}
	.kecil{display: none;}
	.bndra-1{
		width: 25px;
	}
	.slider{
		position: relative; top: 40px; left:5px; width:1300px;
        height: 520px; position: center; margin: auto;
	}
	.paddinggam{padding: 5px;}
	.tinggi-gam{width: 100%;height: 100px;}
	.kotak-vidio{background-image: url('images/tablet.jpg');width: 100%; height: 362px;
		background-repeat: no-repeat;  padding-top: 43px; padding-left: 0;}
	/*===plugin lain lain=============*/
.youtube-container { display: block; width: auto; margin-left:55px; max-width: 445px; height: 89%; border:1px solid #000;}
.youtube-player { display: block; width: 100%; height: 900px;background-color: #000; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height:auto; position: absolute; top: 0; left: 0; }
}
@media only screen and (min-width: 320px) and (max-width: 767px) {

  .sosmed ul{
    margin: 0 auto;
    margin-top:60px;
  }

  .sosmed li{
    font-family: open;
  	text-align: left;
  	margin:0px 5px;
    width: 13%;
    display: inline;
  }

  .sosmed li a{
    font-size: 14px;
    color: #fff;
  }

  .sosmed li a:hover{
    color: #FF0;
  }

  .sosmed-kecil ul{
    margin: 0 auto;
    margin-top:0px;
  }

  .sosmed-kecil li{
    font-family: open;
  	text-align: left;
  	margin:0px 3px;
    width: 13%;
    display: inline;
  }

  .sosmed-kecil li a{
    font-size: 10px;
    color: #fff;
  }

  .sosmed-kecil li a:hover{
    color: #FF0;
  }


	.menujarak{
		padding: 0 0px 0 0px;
		color: #000;
	}
	.jarak-bendera{
		margin-right: -26px;
	}
	.kotak-vidio{width: 100%; height:100%; padding-left: 0;}
	.nama-kecil{font-family: open;font-size: 12px; font-style: italic;color: #8E0404; text-align: left; margin: -6px 0 15px 0}
	.hilang-img{display: none;}
	.notfpond{
		font-family: raleway;
		text-align: center;
		font-size: 60px;
		font-weight: bold;
		color: #f18c0a;
		text-transform: uppercase;
		text-shadow: 1px 3px 2px #000;
		margin-top: 50px;
	}
	.notfpond2{
		font-family: raleway;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #f18c0a;
		text-transform: uppercase;
		text-shadow: 1px 1px 1px #000
	}
	.besar{
		display: none;
	}
	.gede{
		display: none;
	}
	.sedeng{
		display: none;
	}
	.pil{
		display: none;
	}
	.bndra{

	}
	.bndra-1{
		width: 16px;
		margin-left: 5px;

	}
	.topnya{
		background-color: #f0f0f0;
		width: 100%;
		height: auto;
		padding: 4px 0 4px 0;
		margin-top: 0px;
	}
	.pilih-bahas{
		margin-right: 0px;
	}
	.bg-bendera{
		background-color:#008dc7;
		width: 100%;
		height: 30px;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.bg-menu{
		/*background-image: url('images/menu/bg_menu.png');*/
		background-color: #2ba8db;
		width: 100%;
		height: 40px;
		background-repeat: repeat-x;


	}
	.slider{
		position: relative; top: 0px; left:0px; width:1300px;
        height: 520px; position: center; margin: auto;
	}

	.logo-img{
		margin-left: 0px;
		position: relative;
		width: 60px;
		margin-top: -25px;

	}
	.tinggi-bndra{
		padding-top: 8px;
	}
	.tinggi-bndra-2{
		padding-top: 15px;
	}
	.img-banner{
		width: 100%;
		height: 180px;
	}
	.kotak-banner{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 35px;

		margin-top: 0px;
		margin-left: 10px;
	}
	.kotak-banner-xs{
		width: 100%;
		height: auto;
		margin-top: 10px;
	}
	.nama-banner{
		font-family:raleway;
		font-size: 20px;
		color: #0169b6;
		text-align: left;
		line-height: 35px;
		font-weight: bold;
		text-shadow: 1px 2px 1px #eee;
		margin-bottom: 15px;


	}
	.link-banner{
		font-family:raleway;
		font-size: 12px;
		color: #0169b6;
		text-decoration: none;
		padding: 6px 8px;
		text-align: center;
		border:1px solid#ccc;

	}
	.link-banner:hover{
		font-family:raleway;
		font-size: 12px;
		color: #f4a137;
		text-decoration: none;
		padding: 6px 8px;
		text-align: center;
		border:1px solid#f4a137;
	}
	.wel{
		font-family:raleway;
		font-size: 24px;
		color: #040406;
		text-align: left;
		margin-bottom: 10px;
		margin-top: 25px;

	}
	.garis-wel{
		border:1px solid#60b61c;
		width: 100%;
		margin-bottom: 10px;
	}
	.garis-wel2{
		border:2px solid#60b61c;
		width: 14%;
		margin-top: -10px;
		margin-bottom: 15px;

	}
	.garis-wel3{
		border:1px solid#60b61c;
		width: 100%;
		margin-bottom: 10px;
	}
	.garis-wel4{
		border:1px solid#60b61c;
		width: 100%;
		margin-bottom: 10px;
	}
	.jarak-about{
		padding-top: 20px;
	}
	.ket-penjelas-3{
		font-family: open;
		color: #676767;
		font-size: 13px;
		text-align: justify;
		line-height: 25px;

	}
	#bg-knol{
		width: 100%;
		height:auto;
		margin-bottom: 45px;
	}
	.kotak-knol{
		width: 100%;
		height: auto;
		padding-bottom: 20px;
		margin-bottom: 10px;

	}
	.judul-knol{
		font-family:raleway;
		font-size: 24px;
		color: #040406;
		text-align: left;
		margin-bottom: 10px;
		margin-top: 25px;
	}
	.garis-knol{
		border:1px solid#60b61c;
		width: 100%;
		margin-bottom: 10px;
	}
	.garis-knol2{
		border:2px solid#60b61c;
		width: 14%;
		margin-top: -10px;
		margin-bottom: 15px;
	}
	.judul-lts{
		color: #040406;
		font-family:raleway;
		font-size: 24px;
		margin-bottom: 10px;
	}
	.judul-artikel2{
		font-family: open;
		font-size: 12px;
		text-align: left;
		margin-bottom: 10px;
		color: #393939;
		font-weight: bold;
	}
	.judul-artikel{
		font-family: open;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
		color: #393939;
		font-weight: bold;
	}
	.judul-artikel a{
		font-family: open;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
		color: #393939;
		font-weight: bold;
	}
	.judul-artikel a:hover{
		font-family: open;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
		color: #60b61c;
		font-weight: bold;
	}
	.img-artikel{
		width: 100%;
		height: 150px;
	}
	.tgl-artikel{
		color: #a0a0a0;
		font-family: Times New Roman;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 0px;
		text-align: left;
	}
	.text-copy{
		color: #757575;
		font-family: open;
		font-size: 12px;
	}
	.text-copy a{
		color: #1d8ac0;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
	}
	.text-copy a:hover{
		color: #0068b5;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
	}
	.jarak-kontak{
		margin-top: 40px;

	}
	.alamat-depan{
		font-family: open;
		color: #676767;
		font-size: 13px;
		text-align: left;
		line-height: 25px;
		margin-top: 20px;
	}
	.bg-eco{
		background-image: url('images/bg-eko.png');
		background-repeat: no-repeat;
		display: none;
		margin-top: 63px;
	}
	.eco-xs{
		margin: 10px 0 20px 0;
	}
	.text-sendnya{
		color: #676767;
		font-family: open;
		font-size: 12px;
		text-align: left;
		line-height: 18px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.footer-bawah{
		background-color: #d0d0d0;
		width: 100%;
		height: auto;
		padding: 10px 0 10px 0;
		margin-top: 10px;

	}
	.text-copy{
		color: #757575;
		font-family: open;
		font-size: 12px;
		margin-bottom: 10px;
	}
	.text-copy a{
		color: #1d8ac0;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		margin-bottom: 10px;
	}
	.text-copy a:hover{
		color: #0068b5;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		margin-bottom: 10px;
	}
	.bg-footer{
		background-color: #e0e0e0;
		width: 100%;
		height:auto;
		padding: 0 0 0px 0;
		margin-top: 100px;
	}
	.bg-footer-2{
		background-color: #e0e0e0;
		width: 100%;
		height:auto;
		padding: 0 0 0px 0;
		margin-top: 0px;
	}
	#bg-about{
		//background-image: url('images/bg-aboutus2.png');
		width: 100%;
		height: 60px;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 15px;
	}
	.judul-ab{
		font-family: futura;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: left;
		margin-bottom: 5px;
		text-shadow: 1px 1px 1px #000
	}
	.judul-title{
		font-family: open;
		color: #1d1d1d;
		font-size: 12px;
		text-align: left;
    margin: 0px;
    padding: 0px;
    /* border: solid 1px #000; */
	}
	.judul-title a{
		font-family: open;
		color: #959595;
		font-size: 12px;
		text-align: left;
		text-decoration: none;
	}
	.judul-title a:hover{
		font-family: open;
		color: #509c1c;
		font-size: 12px;
		text-align: left;
		text-decoration: none;
	}
	.jarak-img-bg{
		padding-top: 15px;
	}
	.jarak-yutube{
		margin-top: -180px;

	}
	.kotak-qlty{
		margin-bottom: 30px;
		padding-bottom: 10px;
		height: 400px;
	}
	.kotak-qlty2{
		margin-bottom: 30px;
		padding-bottom: 10px;
		height: 450px;
	}
	.kotak-text{
		width: 100%;
		height: 100px;
	}

	.kotak-ref{
		width: 100%;
		height: auto;
		padding: 6px;
		border:1px solid#cdcdcd;
		background-color: #fff;
		margin-bottom: 20px;
	}
	.input{
		border-left: none;
		border-right: none;
		border-top: none;
		background: none;
		box-shadow: none;
		font-family: open;
		color: #0169b6;
		font-size: 12px;
		text-align: left;
		padding-left: 2px;
	}
	.input:focus{
		background: none;
		box-shadow: none;

	}
	.jarak-input{
		padding-bottom: 10px;
	}
	.marker{
		font-size: 50px;
		color: #fff;
		margin-left: 20px;
	}
	.lainnya-2{
		font-size: 14px;
	}
	.nama-qlty{
		font-family:raleway;
		font-size: 14px;
		color: #509c1c;
		text-align: left;
		line-height: 35px;
		font-weight: bold;
		text-shadow: 1px 2px 1px #ccc;
		margin-bottom: 8px;
		margin-top: 0px;

	}
	.nama-artikel{
		font-family: "futura";
		font-size: 14px;
		color: #509c1c;
		text-align: left;
		line-height: 35px;
		/*font-weight: bold;*/
		text-shadow: 1px 2px 1px #ccc;
		margin-bottom: 8px;
	}
	.img-qty{
		float: left;
		width: 230px;
		height: 160px;
		margin-right: 20px;
		margin-bottom: 10px;
	}
	.ket-penjelas{
		font-family: open;
		color: #676767;
		font-size: 13px;
		text-align: justify;
		line-height: 25px;
	}
	.ket-penjelas a{
		font-family: open;
		color: #525252;
		font-size: 13px;
		text-align: left;
		line-height: 25px;
		text-decoration: none;
	}
	.ket-penjelas a:hover{
		font-family: open;
		color: #676767;
		font-size: 13px;
		text-align: left;
		line-height: 25px;
		color: #ebb704;
	}
	.ket-penjelas-2{
		font-family: open;
		color: #7bd5ff;
		font-size: 13px;
		text-align: justify;
		line-height: 25px;
		margin-bottom: 18px;
	}
	.ket-penjelas-3{
		font-family: open;
		color: #676767;
		font-size: 13px;
		text-align: justify;
		line-height: 25px;

	}
	.read{

		padding: 6px 8px;
		text-align: center;
		border:1px solid#ccc;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.read:hover{
		padding: 6px 8px;
		text-align: center;
		border:1px solid#509c1c;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		background-color: #509c1c;
		color: #fff;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.read-2{
		padding: 5px 6px;
		text-align: center;
		border:1px solid#ccc;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.read-2:hover{
		padding: 5px 6px;
		text-align: center;
		border:1px solid#509c1c;
		font-family: open;
		font-size: 12px;
		text-decoration: none;
		background-color: #509c1c;
		color: #fff;
		transition:ease-out all 2s;
		-moz-transition:ease-out all 2s;
		-webkit-transition:ease-out all 2s;
		-o-transition:ease-out all 2s;
	}
	.kotak-text{
		width: 100%;
		height: 140px;
	}
	.kotak-prodev{
		border:1px solid#d6d3d3;
		padding: 5px;
		height: auto;


	}
	.img-prodev{
		height: 150px;
		width: 100%;


	}
	.img-prodev-dtl{
		float: left;
		margin-right: 25px;
		margin-bottom: 15px;
	}
	.nama-dtl-prod{
		font-family: open;
		font-size: 20px;
		color: #5c5b5b;
		font-weight: bold;
		text-transform: capitalize;
		margin-bottom: 10px;
		margin-top: -5px;

	}
	.lainnya{
		margin-top: 0px;

	}
	.img-artikel-2{
		width: 100%;


	}
	.img-prodev{
		width: 450px;
	}
	.img-prodev-2{
		width: 100%;

		margin-bottom: 10px;

	}
	.img-artikel-kecil{
		width: 100%;
		height: 80px;

	}
	.img-artikel-kecilxs{
		height: 80px;
		border: 1px solid#ccc;
		padding: 3px;

	}
	.link-artikel{
		font-size: 12px;
		color: #474746;
		text-decoration: none;

	}
	.img-dtl{
		text-align: center;
		width: 70%;
	}
	.nama-produknya{
		color: #404040;
		font-family:raleway;
		font-size: 24px;
		margin-top: 25px;
		margin-bottom: 15px;
	}
	.judul-spek{
		color: #0169b6;
		font-family: raleway;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.kotak-spek{
		border:1px solid#0169b6;
		padding: 10px;
		width: 100%;
		height: auto;
	}
	.kotak-xs-li{
		width: 100%;
		height:auto;
		padding: 3px;
	}
	.border-img-xs{
		border:2px solid#ccc;
		padding: 2px;
	}
	.jarak-img-xs{
		padding-top: 15px;
	}
	.judul-artikel-3a{
		font-family: raleway;
		font-size: 14px;
		color: #2e2e2e;
		margin: 10px 0 15px 0;
	}



}
@media only screen and (min-width: 320px) and (max-width: 800px) {




	.nama-kecil{font-family: open;font-size: 12px; font-style: italic;color: #8E0404; text-align: left; margin: -6px 0 15px 0}
	.img-prodev{
		width: 450px;
		height: 160px;
	}
}
.menu-kat-pro{
	padding: 6px 12px; text-align: center; border:1px solid#ccc; font-family: open; font-size: 13px;
	text-decoration: none;
}
.menu-kat-pro:hover{
	border:1px solid#F29B04;
}
.menu-kat-pro2{
	padding: 6px 12px; text-align: center; border:1px solid#000; font-family: open; font-size: 13px;
	text-decoration: none; color: #F29B04;
}
.menu-kat-pro:hover{
	border:1px solid#F29B04;
}
.kotak-quality{
	margin-bottom: 15px;
	border-bottom: 1px solid#E9E9E9;
	padding-bottom: 20px;
}
.garis-quality{

}
.kotak-vidio{background-color: #fff}
.img-produk{
	border:3px solid#b6b6b6;
	padding: 2px;
	text-align: center;
	margin-bottom: 6px;
	width: 100%;

	transition:ease-in all 1s;
	-moz-transition:ease-in all 0.5s;
	-webkit-transition:ease-in all 0.5s;
	-o-transition:ease-in all 0.5s;
}
.img-produk:hover{

	-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	transition:ease-out all 1s;
	-moz-transition:ease-out all 1s;
	-webkit-transition:ease-out all 1s;
	-o-transition:ease-out all 1s;
	border:3px solid#52930C;
}

}

/* tambahan style agung */

.product-image img{
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.product-image img:hover{
  -moz-transform: scale(1.8);
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
}

.bg-situasi{
  height:180px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  /* border:solid 1px #999; */

}

.title-page{
  position: absolute;
  margin: 0px;
  padding: 0px;
  margin-top: -80px
}

.margin-tb-20{
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .menu-foter {
        margin-top: 0;
    }
}

/*star-marginHome*/
.marginHome {
    margin-bottom: 125px;
}

@media (max-width: 1100px) {
    .marginHome {
        margin-bottom: 125px;
    }
}

@media (max-width: 1023px) {
    .marginHome {
        margin-bottom: 100px;
    }
}

@media (max-width: 991px) {
    .marginHome {
        margin-bottom: 100px;
    }
}
/*end-marginHome*/

/*star-marginFoot*/
.marginFoot {
    margin-bottom: 125px;
}

@media (max-width: 1100px) {
    .marginFoot {
        margin-bottom: 125px;
    }
}

@media (max-width: 1023px) {
    .marginFoot {
        margin-bottom: 100px;
    }
}

@media (max-width: 991px) {
    .marginFoot {
        margin-bottom: 100px;
    }
}
/*end-marginFoot*/