body {background-color:#DFE4F6;}

hr {border:#8BA9E7 solid 1px; margin:0; padding:0}
h1 {padding-bottom:12px;}
/*--HEADER TOP--*/
.headertop {padding-top:20px; padding-bottom:15px; background-color:#004A80}
.headertop .logo{padding-top:5px;}
.headertop .logo img{ width:100%;}


/*NAV DEKSTOP*/
.nav-dekstop { color:#FFFFFF; }
.nav-dekstop a:link,.nav-dekstop a:visited{ color:#FFFFFF; padding-bottom:2px; }
.nav-dekstop a:hover{ border-bottom:#6699FF solid 3px;}
.nav-dekstop li{float:left; list-style:none; padding-left:0px; padding-right:15px; text-transform:capitalize; padding-bottom:8px; padding-top:0px;}

/*NAVBAR MOBILE*/
.navbar-default {z-index:10}
.navbar {border-bottom:none}
.navbar-header { background-color:#000000; opacity:0.8 }
.navbar-header .navbar-brand {}
.navbar-header .navbar-toggle { border:none}
.navbar-header .navbar-toggle .sr-only{}
.navbar-header .navbar-toggle .icon-bar{background-color:#FFFFFF; width:25px;height:3px;}

.navbar-collapse { background-color:#566BB6;}
.navbar-collapse li a:link,.navbar-collapse li a:visited { color:#FFFFFF}
.navbar-collapse li:hover{ background-color:#A9BBFB; color:#FFFFFF;}

/**---------------------------COLUMN PADDING TOP BOTTOM*---------------------------*/
.col_pad30{ padding-top:30px; padding-bottom:40px}
.col_pad3040{ padding-top:30px; padding-bottom:80px}

.col_pad10{ padding-top:10px; padding-bottom:10px}
.col_pad5{ padding-top:5px; padding-bottom:5px}


/*COLUM IKLAN VERTICAL*/
.col_iklan_vertical_box {}
.col_iklan_vertical_box .head_title {padding-top:8px; padding-bottom:8px; padding-left:20px;}

.col_iklan_vertical {padding-top:0px; max-height:300px}
.col_iklan_vertical .inner { background-color: #A9D9FB;max-height:260px;box-shadow:0 5px 5px rgba(0,0,0,.5) }
.col_iklan_vertical .inner .image{ background-color:#FFFFFF}
.col_iklan_vertical .inner .image img{ width:100%; height:185px; padding:8px}
.col_iklan_vertical .inner .image img:hover, .col_iklan_vertical .inner .image img:focus {opacity:0.8}

.col_iklan_vertical .inner .content{ padding:8px 12px; min-height:235px }
.col_iklan_vertical .inner .content p{ padding:0px ; margin:0; text-align:center}
.col_iklan_vertical .inner .content .title{ font-weight:bold; font-size:18px;}
.col_iklan_vertical .inner .content .tag{ font-size:13px}

/*COLUMN TUMBNAIL*/
.col-thumb{padding:10px;}
.col-thumb .image img{width:100%; height:170px;}
.col-thumb .inner{background-color:#ededed; padding:10px; color:#333333;box-shadow:0 3px 4px rgba(0,0,0,.5);}
.col-thumb .inner .caption{padding:0px 8px; min-height:300px; text-align:center;}
.col-thumb .inner .caption .price{}

.col-thumb .inner h1{ font-size:18px;text-transform:capitalize;line-height:1.5}
.col-thumb .inner h2{ font-size:16px;text-transform:capitalize;line-height:1.3}
.col-thumb .inner h3{ font-size:15px;text-transform:capitalize;line-height:1.2}
.col-thumb .inner h4{ font-size:20px;text-transform:capitalize;line-height:1.5}

.col-thumb .button {padding:8px; margin-bottom:12px; background-color:#003399; text-align:center; box-shadow:0 3px 4px rgba(0,0,0,.5); border-radius:6px; float:none;}
.col-thumb .button a:link, .col-thumb .button a:visited {color:#FFFFFF}
.col-thumb .button:hover {background-color:#1485BE;}

.col-thumb .caption a:link, .col-thumb .caption a:visited{color:#003399}
.col-thumb a:hover {opacity:0.8}

@media only screen and (max-width: 767px) {
.col-thumb .inner .caption{ height:430px}
}


/*COLUMN TUMBNAIL LEFT IMG*/
.col-thumb-left {padding:10px; width:100%; clear:both; background-color:#fff; margin-bottom:8px; min-height:100px; box-shadow:0 3px 5px #B8C5F3}
.col-thumb-left .image {width:30%; float:left; background-color:#FFFFFF; margin-right:10px}
.col-thumb-left .image img{padding:9px; width:100%; height:80px;}
.col-thumb-left .caption{ padding:8px;}
.col-thumb-left .caption .title{text-transform:uppercase; font-size:18px; padding-bottom:8px}
.col-thumb-left .caption .readmore{ padding-top:8px;}




/*---FOOTER----------*/
.footer {background-color:#000000; color:#FFFFFF;padding:12px;}
.footer .content{ }
.footer .content li{list-style:none; padding-left:15px;}
.footer .content li a:link,.footer .content li a:visited {color:#FFFFFF; text-transform:capitalize}
.footer .content .logo {}
.footer .content .logo img{width:100%}

/*--------------PAGE CSS------------------*/
/*---BREADCHUMB----*/
.breadchumb { padding-left:10px; padding-top:10px; padding-bottom:15px;}
.breadchumb a:link,.breadchumb a:visited{ color:#FFFFFF;}
.breadchumb span{ font-size:24px; margin:0px; padding:0px}


.breadchumb_label {padding-left:15px; padding-bottom:15px;}  
.breadchumb_label a:link,.breadchumb_label a:visited{ color:#FFFFFF;}
.breadchumb_label a:hover{ color:#09139A;}

.breadchumb_label span{border-radius:5px; padding:5px 12px; margin-right:3px; background-color:#09139A; line-height:40px; box-shadow:0 3px 4px rgba(0,0,0,.5)}
.breadchumb_label span:hover{ background-color:#9AC2FE;}

/*COLUMN MAIN*/	
.col_main {padding-bottom:15px;}
.col_main .content{ padding-right:20px}
.col_main .content .breadchumb { padding-left:0px; padding-top:14px; padding-bottom:10px;}
.col_main .content .breadchumb .count{ float:right;}
.col_main .content .breadchumb a:link,.col_main .content .breadchumb a:visited{color:#777777;}

.col_main .content .title{}
.col_main .content .price{ background-color:#FFFFCC; padding:8px; display:table}
.col_main .content .desk{}
.col_main .content .desk .image{float:right; margin-left:15px; margin-bottom:0px;}
.col_main .content .desk .image img{width:250px; padding:9px; background-color:#FFFFFF}
.col_main .content .desk .imagebig {padding:15px 0px;}
.col_main .content .desk .imagebig img{width:100%; padding:5px; background-color:#FFFFFF}
.col_main .content .desk .imagemid {padding:0px 5px 8px 0px}
.col_main .content .desk .imagemid img{width:24.5%; height:166px; padding:5px; background-color:#FFFFFF}


/*COLUMN SIDEBAR LEFT/RIGHT MAIN*/	
.col_sidebar { padding: 0x 20px 20px 15px;}
.col_sidebar .content{padding-bottom:0}
.col_sidebar .content .title{ color:#0054A6; padding-bottom:10px; text-transform:capitalize;}
.col_sidebar .content .desk{}
.col_sidebar .content .image{}
.col_sidebar .content .image img{width:100%}
.col_sidebar .content .view {}
.col_sidebar .content .view img{ width:50%; height:175px; padding:5px;}
.col_sidebar .content .view img:hover{opacity:0.5}

/*ADDITIONAL*/	
.simulasi_button {position:fixed; z-index:15; top:150px; right:0px}
.simulasi_button_mobile {position:fixed; z-index:20; bottom:60px; opacity:0.8}
.btn-simulasi-pg {box-shadow:0 3px 4px rgba(0,0,0,.5)}

.sk_hsl, .sk_hsl_kdt { border:none; background-color:none; font-size:18px; color: #0D3572; font-weight:bold}
.lc_inputkonfrm02{ border:none; background-color:none; text-align:center; font-weight:bold; font-size:24px; width:auto; color:#FF6600}

/*FLOATING BUTTON*/
.float-btn { position:fixed; bottom:0px;width:100%; border-top: #346E0D solid 3px;}
.float-btn img{ max-width:25px;}

.float-btn-call {background-color:#F26522;min-height:50px;}
.float-btn-call:hover {background-color:#BE4A12;}
.float-btn-call a:link,.float-btn-call a:visited{color:#000000;}
.float-btn-call a:hover{color:#FFFFFF;}

.float-btn-mail {background-color:#197B30;color:#FFFFFF;min-height:50px;}
.float-btn-mail:hover {background-color:#125D24; color:#FFFFFF}
.float-btn-mail a:link,.float-btn-mail a:visited {color:#FFFFFF}
.float-btn-call,.float-btn-mail {padding-top:5px;}


@media only screen and (max-width: 767px) {
.trjual-label{}
.trjual-label img{width:98%}

}


@media(min-width: 992px){ .col5{ width: 20%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } }

@media only screen and (max-width: 767px) {

.headertop {padding-top:10px; padding-bottom:8px;}
.breadchumb_label { width:100%; padding:6px; font-size:14px}  

.col_iklan_vertical .inner { border:#ededed solid 1px; padding:10px; background-color:#fff; margin-top:8px; margin-bottom:5px; box-shadow:0px 5px 3px -3px rgba(0,0,0,.5); height:220px;}
.col_iklan_vertical .inner .content{min-height:3px }
.col_iklan_vertical .inner .content .tag{ font-size:14px;}
.col_iklan_vertical .inner .image img{ width:70%; height:auto;}


.col-thumb .inner .caption{ min-height:1px; text-align:center}

.col-thumb-left {padding:8px; min-height:90px}
.col-thumb-left .image img{height:auto;}

/*col_main*/
.col_main {padding-bottom:0px}
.col_main .content{ padding-right:10px; padding-bottom:0px }
.col_main .content .breadchumb {padding-top:0px;}
.col_main .content .title{}
.col_main .content .desk .image span{float:none; text-align:center; float:none}
.col_main .content .desk .image img{ width:100%; margin-bottom:20px;}
.col_main .content .desk .imagebig {}
.col_main .content .desk .imagebig img{padding:2px;}
.col_main .content .desk .imagemid {padding:0px 0px 8px 0px}
.col_main .content .desk .imagemid img{width:23.5%; height:80px; padding:2px;}



/*col_sidebar*/
.col_sidebar { padding-top: 0px;}
.footer { text-align:center; padding:0;}

.simulasi_button {bottom:0px;}


} 
@media only screen and (min-width:100px) and (max-width:360px){}