/*======================================*/
/*=== CSS STyle, Dev By WandyRifaldi ===*/
/*======================================*/
body {background:url(../img/bg_boxed.png) repeat #FFF; color: #606060; }
section P { line-height:1.6em;}
/*=============== TOP Section ===============*/
#top { 
	height: auto; 
	margin-bottom: 10px; 
	background: url(../img/pixcel.png) repeat #e77713; 
	border-bottom: 2px solid #AA5408;
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);}
#top .header-box { background: url(../img/bg_header.png) no-repeat;border: none; box-shadow: none; height: 110px;}
#top .header-box .brand {}
#top .header-box .brand img { margin: 0; }

#top .navbar-fix { 
	height:40px; 
	margin:0 0 -20px; 
	
	background-color: #363636;
}
#top .navbar-fix .nav > li > a { 
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding:10px 20px; 
	font-size: 14px; 
	color: #FFF; 
	border-right: 1px solid #272727; 
	text-shadow: 0 1px 0 #39434A;}
#top .navbar-fix .nav > li.active > a { background: #272727; color: #FFF;}

#top .navbar-fix .btn-navbar {margin: 7px 5px 0;}
#top .nav-collapse {background: #BC9776; z-index:10;}
#top .nav-collapse .nav > li > a {text-shadow: none; border-radius: 0;}
#top .nav-collapse .nav > li > a:hover { background: #3F3F3F; }

#top ul.dropdown-menu li{ border-bottom: 1px solid #EBEBEB;}
#top ul.dropdown-menu li a:hover { background: #346581;}

#top ul.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    visibility: hidden;
    margin-top: -35px;
}
#top ul.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
	background:none;
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

.search-box { margin:0;}
.search-box form {margin:5px 7px 0;}
.search-box form input.search-query {background: #8D8D8D; border: 1px solid #121212;}

/*=============== SLIDE Section ===============*/
#slider{margin: -8px 0 0;}
.box-slider {
	margin: 5px 0;
	width: auto; 
	height: auto; 
	display:block;
	z-index: -1;}
.box-slider	.carousel {margin-bottom: 2px;}
.box-slider .carousel-control { 
	font-size: 34px;
    height: 30px;
    line-height: 24px;
    width: 30px;
	margin-top: 10px;
	background: #83B0C6;}
.box-slider .carousel-indicators {
    bottom: 0;
    list-style: none outside none;
    margin: 0 10px;
    padding: 0;
    position: absolute;
    z-index: 5;}
/*=============== CONTENT Section ===============*/
#content{}	
.box-cont { margin:10px 0; padding: 5px;}
.box-cont img.paragraf { float:left; margin: 0 10px 0 0}
.box-cont a.more {background: #E2E2E2; color:#264360; margin: 0; padding: 5px 15px;}

.galery-box{margin:0 -5px 10px;}
.galery-box img {
	height: auto;
    margin: 0 8px 10px 6px;
    width: auto}
ul.gallery {list-style:none; margin:15px 0;}
ul.gallery li {
	background: none repeat scroll 0 0 #D5DDE0;
    display: inline-block;
    margin: 10px;
    padding: 5px;}
ul.gallery li img { border: 5px solid #FFF; display: block; margin:0;}
ul.gallery li span { background:#A3C3D1;text-align: center; font-size: 12px; position: relative; display: block; margin:0 auto; color:#FFF; width:auto;}

h4.header {
	background:#e77713; 
	border-bottom: 2px solid #AA5408; 
	color:#FFF;
	font-size: 14px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
	text-shadow: 0.1em 0.1em 0.05em #69878F;
	padding: 5px 10px; 
	margin:-5px -6px 10px;}
h4.header2 {
	background:#0092DB; 
	border-bottom: 2px solid #096796; 
	color:#FFF;
	font-size: 14px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
	text-shadow: 0.1em 0.1em 0.05em #5D5D5D;
	padding: 5px 10px; 
	margin:-5px -6px 10px;}
	
h5.subheader { padding:5px; margin-top: 35px; color:#598DA4; font-size: 20px; border-bottom: 1px dotted #D9E3E7; border-top: 1px dotted #D9E3E7;}
	
ul.service { list-style:none; margin:0 10px;}
ul.service li {border-bottom: 1px solid #E4E4E4; padding: 2px 0;}
ul.service li:hover {background: #E6E6E6;}
ul.service li a { color: #4F4F4F; font-size: 12px; text-decoration:none;}

.soft-box {background: #E4E4E4; border-top: 1px solid #C7C7C7; border-bottom: 1px solid #C7C7C7; height: auto; margin-top: 25px;}
.soft-box .span4 {border-right: 1px solid #C7C7C7;}

#content .accordion-heading .accordion-toggle {background: #E4EDEF;}
#content .accordion-heading .accordion-toggle a { color:#3f5f7f;}
#content .accordion-heading .accordion-toggle:hover {text-decoration:none; background: #C2CED1;}
#content .accordion-heading .accordion-toggle a.active {text-decoration:none; background: #C2CED1;}

.block_blog {}
.block_blog .blog_post {padding:10px 5px 15px; border-bottom:10px solid #EEE;}
.block_blog .blog_post img { float:left; margin-right: 10px; background: #FFF; padding: 3px;}
.block_blog .blog_post .title {}
.block_blog .blog_post .title a{ color: #598DA4;}
.block_blog .blog_post .title a:hover {color:#3f5f7f; text-decoration:none;}

.block_blog .blog_post .info {height:32px; margin-bottom:17px; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;}
.block_blog .blog_post .info p {padding-bottom:0px;}
.block_blog .blog_post .date {height:32px; float:left;}
.block_blog .blog_post .date p {font-size:11px; color:#868686; line-height:32px;}
.block_blog .blog_post .date a {font-size:11px; color:#868686;}
.block_blog .blog_post .author {height:32px; margin-left:21px; float:left;}
.block_blog .blog_post .author p {font-size:11px; color:#8a8a8a; font-weight:bold; line-height:32px;}
.block_blog .blog_post .author a {font-size:11px; color:#5e5e5e; font-weight:bold;}
.block_blog .blog_post .author a:hover {color:#f24024; text-decoration:none;}

.article-widget { list-style:none; margin:0 0 20px;}
.article-widget li {display:inline-block; width: 100%; padding: 5px 0; border-bottom: 1px solid #E0E0E0;}
.article-widget img { width:60px; height:60px; float:left; margin:0 10px 0 0;}
.article-widget a.widget-title {font-size:12px; font-weight: bold !important; color:#598DA4;}
.article-widget a.widget-title:hover { color:#4B6D87; text-decoration:none;}
.article-widget span.widget-date {font-size:12px; display: block;}
.article-widget span.widget-writer {font-size:12px; display: block;}

.box-contact { background: url(../img/bg_contact.jpg) repeat-x; padding: 10px; margin:-10px -6px;}
.box-contact h4 { color:#4087C7; font-size:16px; line-height: 25px; margin-bottom: 45px;}
.box-contact form {margin-top: 25px;}
.box-contact form label {color:#666; margin-bottom:10px;}
.box-contact form input {width:70%;}
.box-contact form textarea {width:90%;}
/*=============== FOOTER Section ===============*/
#footer { margin: 0; padding: 10px; background: url(../img/pixcel.png) repeat #096796; border-top: 3px solid #0092DB;}
.cont_foot { margin:0; padding: 5px 0 0;}
.cont_foot p { color:#D8D8D8; font-size: 12px;}

.social ul {float:right;  margin:-10px auto; display:block; }
.social ul li { float:right; width:40px; height:40px; display:block; padding:0 2px 0 0; }
.social ul li a { width:40px; height:40px; display:block;  opacity:0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  }
.social ul li a:hover {  opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  }
.social ul li.facebook a {  background: url(../img/facebook.png) no-repeat;     }
.social ul li.twitter a {  background: url(../img/twitter.png) no-repeat;  }


/*=============== Media Grid ===============*/

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.box-cont {  min-height: auto !important;}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
.brand {width: 280px; height:auto;}
.box-cont { height:auto;}
.soft-box {display:none;}
}