/*
header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}
*/

html,
body {
    width: 100%;
    height: 100%;
    padding: 0px;
	margin:0;
	font-family: 'Arial';
    /*    overflow-x:hidden; */
}


/*
==========================================================================================
                                HEADER
==========================================================================================
*/

.kop-logo {}

.kop-logo img {
	float:left;
    margin-right: 10px;
    margin-left: 0;
	width:55px;
}

.kop {
    margin-left: 0;
    padding-left: 0;
}
.top-header{width:100%;
height:5px;
background:rgb(211, 56, 30) !important;    -webkit-box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.33);
    box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.33);
}
#header {
	position:fixed;
	width:100%;
	z-index:6000;/*
	background: url(../img/bghead3.png) top center no-repeat;
background-color: #00456d;*/
background:#fff;
	height:60px;
}
.header-right a{
	color:#7c7c7c;
}
.header-right1{
	display:block;float:left;width:100%;
}
.header-right2{
	display:none;
}
.form-top{
	display:none;
}
	.header1{
	display:none;}
	.header2{
	display:block;
	color:#fff;
	margin-top:10px;
	font-size:14px;
	width:300px;
	float:left;}
.panel-utama{
	background:#3e50b4;
	min-height:400px;
	display:inline-block;
	width:100%;
    position:relative;
}
.panel-kanan{
	border-left: 1px solid #133783;
	background:#f6f7f8;
	float:right;
	min-height:540px;
	padding-top:70px;
	width:100%;
}
.panel-kiri{
	margin-top:140px;
    float:left;
}
.fixed-panel-kiri{
    position:fixed;
    top:0;
    left:0;
}

.bottom-panel-kiri{
    top:auto;
    bottom:0;
    position:absolute;
}

.header-right-site{
	display:none;
}

.story-home-cat{
    margin: 0px;
    padding: 8px 0px 8px 8px;
    font-size: 14px;
    line-height: 20px;
}
.story-home-readmore a {
    padding: 8px 10px 8px 10px;
    float: left;
    background: #222222;
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
}.story-home-readmore a {
    background: #10a0d5 !important;
}
.story-home-cat-img{
	float:left;
	width:30%;
	display:block;
	padding-right:1%;
}
.story-home-cat-text{
	float:right;
	width:70%;
}
.panel-kiri{
	display:none;
}
.sidebar-top{
	display:block;
	position:fixed;
	margin-top:60px;
	z-index:999;
	width:100%;
	background:#3e50b4;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.menu
{
	font-size:13px;
	font-weight: bold;
	float:left;
	width:100%;
	z-index:99;
}
 .menu ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	width:100%;
}
 .menu ul li
{
	float : left;
	padding:10px;
	position: relative;
	width:100%;
	color:#0048b;
	height:35px;
}
.menu ul li a
{	color:#000;
	text-decoration : none;
	display : block;
	float: left;
	padding: 5px;
}
.menu ul li a:hover
{
	border-bottom:2px solid#F00;
	color:#999;
}
.menu ul li a:active
{
	background-color:#fff;
	color : #990;
}
.menu ul li ul
{
	z-index:98;
	width:100%;
	display : none;
	background:#fff;
	padding-left:5px;
	-webkit-box-shadow: 2px 5px 10px #999;
	-moz-box-shadow: 2px 5px 10px #999;
}
.menu ul li:hover ul:hover
{
}
.menu ul li:hover ul
{
	display : block;
	z-index:88;
	top :35px;
	position: absolute;
	padding-top: 1px;
	left:0;
	width:100%;
	box-shadow: 2px 5px 6px rgb(204, 204, 204);
	font-weight:normal;
}
.menu ul li:hover ul li
{
	border-bottom:1px solid #ebebeb;
	background-color:#fff;
	display : block;
	width: 100%;
	background:url(../image/subMenuLi.jpg) no-repeat left center;
	}
.menu ul li:hover ul li a
{
	padding-left:10px;
	padding-top:0;
	width:100%;
 color:#000;
	}
.menu ul li:hover ul li a:hover
{
	border:none;
	color:orange;
}

@media only screen and (min-width: 992px) {
.sidebar-top{
	display:none;
}
#header {
	height:85px;box-shadow: 0px 0px 8px 0px #000;
}
.header-right1{
	display:block;float:left;width:80%;padding-top:15px;
}
.header-right2{
	display:block;float:right;width:20%;padding-top:10px;
}
.header-right-site{
float:right;width:50%;color:#fff;
display:block;
}
.sidebar{
padding-left:10%;
padding-right:10%;
}
.sidebar ul{
	list-style:none;
	margin:0;
	padding:0;
}
.sidebar ul  ul li{
	padding-left:10px;
	padding-bottom:5px;
	padding-top:5px;
	border-bottom:none;
	border-top:1px solid rgba(255,255,255,.6);
	border-bottom:none;
	display:block;
}
.sidebar ul  ul{
	margin-top:10px;
	margin-bottom:-10px;
}
.sidebar ul li{
	padding-bottom:10px;
	padding-top:10px;
	border-bottom:1px solid rgba(255,255,255,.6);
	display:block;
}
.sidebar ul li a{
	text-decoration:none;
	color:#e2e2e2;
	font-size:13px;
}
.sidebar ul li a:hover{
	color:#fff;
}
.sidebar-alamat{
	color:rgba(255,255,255,.6);
	font-size:14px;
	text-align:center;
}

	.header1{
		padding-top:17px;
	display:block;}
	.header2{
	display:none;}
	
.form-top{
	display:block;
}
	
.panel-kiri{
	width:0%;
	display:block;
}
.panel-kanan{
	width:76%;
	background:#f6f7f8;
	float:right;
	min-height:540px;
	padding-top:65px;
}
.panel-kiri{
	min-height:500px;
	width:24%;
	float:left;
}
.story-home-cat{
    margin: 0px;
    padding: 0px 0px 0px 0px;
    font-size: 14px;
    line-height: 20px;
}
.story-home-readmore a {
    padding: 8px 10px 8px 10px;
    float: left;
    background: #222222;
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
}.story-home-readmore a {
    background: #10a0d5 !important;
}
.story-home-cat-img{
	float:left;
	width:30%;
	padding-right:1%;
}
.story-home-cat-text{
	float:right;
	width:70%;
}
}
/*
==========================================================================================
                                    HOME
==========================================================================================
*/
#home{
	height:400px;
	width:100%;
}
	.home-slide{padding-top:280px;right:0;bottom:0;}
	.home-slide p.text-info{display:none;height:0;padding:0;margin:0;}
/*
==========================================================================================
                                INTRO SECTION
==========================================================================================
*/

.intro-section {
    padding: 0;
    height: auto;
    width: 100%
}
.intro-welcome{
	padding:1%;
    background: #103246;
	color:#fff;
    text-align: center;
}



/*
==========================================================================================
                                Public SECTION
==========================================================================================
*/
.public_judul{
	background: #F5F5ED none repeat scroll 0% 0%;
	border-top: 10px solid #F58220;
	border-bottom: 1px solid #E9E9DD;
	padding: 10px 0px;
	height: 50px;
	text-align:left;
	width: 100%;
	font-size: 19px;
	font-weight: 700;
	color: #3498DB;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);}
.public-section  img {
    /*    margin-top: 45px;*/
    width: 50%;
    height: 50%;
    text-align: center;
	margin-left:auto;
	margin-right:auto;
	border:3px solid #00838F;
	border-radius:50%;
}
.public-section  img:hover {
	border:2px solid #f90;
}

.ca-main{
    font-size: 20px;
    opacity: 0.8;
    text-align: center;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-sub{
    text-align:center;
    font-size: 15px;
    color: #666;
    line-height: 20px;
    opacity: 0.8;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

.public-area:hover .ca-main{  
color:#00838F; 
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
}
.public-area:hover .ca-sub{
    color:#00838F;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}
.public-section p {
    color: #000;
    text-align: center;
}
.public-area {
    color: #000;
    text-align: center;
}
.public-section h3{
	size:0.5 em;
	text-shadow: 0px 1px 1px #030303;
    text-align: center;
}

.public-section {
	padding:1%;
	margin:1%;
	width:98%;
	border:1px solid #bdbdbd;
	display:inline-block;
	background:#ececec;
}

.box-public{
	margin-bottom: 20px;
	min-height:300px;
background-color: #FFF;
border: 1px solid #f58634;
border-radius: 3%;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.box-public-header{
	    color: #FFF;
    background-color: #f58634;
    border-color: #00838c;
	text-align:center;
padding:3%;
}
}
.box-public-content{
padding:2%;
	height: 1000%;
overflow: hidden;
background: #FFF none repeat scroll 0% 0%;
position: relative;
box-sizing: border-box;
}
.box-public-content ul{   
list-style:none;
padding:3%;
}
.box-public-content ul li{
	border-bottom: 1px solid #bdbdbd;
    padding: 0px;
    margin: 0px;
}
.lengkap{
border-color: #357EBD;
padding:3%;
text-align:center;
}

.judul-public{font-weight: 300;
color: #2980B9;
font-size: 3em;
text-align: center !important;
margin-bottom: 10px !important;
}

.sub-judul-public{
    background-color: #00838F;
    color: white;
    font-weight: 600;
   
}

/*
==========================================================================================
                                ABOUT SECTION
==========================================================================================
*/
.about_judul{
padding-top: 10px;
height: 50px;
text-align:left;
width: auto;
font-size: 22px;
font-weight: 700;
color: #3498DB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);}
.profil-section p {
    color: #000;
    text-align: justify;
}

.profil-section {
	padding:1%;
	display:inline-block;
	margin-bottom: 0;
}


.judul-about{font-weight: 300;
color: #2980B9;
font-size: 3em;
text-align: center !important;
margin-bottom: 10px !important;
}

.sub-judul-about{
    background-color: #103246;
    color: white;
    font-weight: 600;
   
}


/*
==========================================================================================
                                contact SECTION
==========================================================================================
*/
.contact-section img {
    /*    margin-top: 45px;*/
    width: 100%;
    height: 150%;
    margin: 30px 15px;
}

.contact-section p {
    color: #000;
}

.contact-section {
	padding:1%;
	margin:1%;
	border:1px solid #bdbdbd;
	display:inline-block;
	background:#ececec;
}

.judul-contact{
    font-weight: 300;
    color: #00838F;
    font-size: 3em;
}

.sub-judul-contact{
    background-color: #00838F;
    color: white;
    font-weight: 600;
   
}


/*
==========================================================================================
                                SECTION BERITA
==========================================================================================
*/
/*BERITA*/
.berita-section {
	margin-bottom: 2%;
	margin-left: 2%;
	margin-right: 2%;
	background-color: #ffffff;
	border-radius: 2px;
	padding:1%;
	width:96%;
	display:inline-block;
border: 1px solid #e5e5e5;
 box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    -moz-box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}/*
.berita-section img {
    width: 100%;
    height: 100%;
}*/

.berita-space p{
    margin-left: 0 !important;
    
}
.judul-berita i {
color: #e2e2e2;
}
.judul-berita {
border-bottom: 1px solid #e5e5e5;
margin-bottom:1%;
	margin-top: -1%;
	margin-left: -1%;
	margin-right: -1%;
	height: 40px;
line-height: 36px;
background: #f15a22;
color: #e2e2e2;
font-size: 13px;
font-weight: 600;
padding: 0 8px;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
}
.judul-berita-1{
	float:left;
	width:auto;
}
.judul-berita-2 {float:right;width:auto;	margin-right:10px;}
.judul-berita-2:hover span  { margin-left: 10px; margin-right: -10px; transition: all 0.3s ease;}
.judul-berita-2 a{ color:#e2e2e2;}
.judul-berita-2 a:hover{ text-decoration:none;}

.sub-judul-berita {
    background-color: #00838F;
    color: white;
    font-weight: 400;
}
.box-berita img{   
width:100%;
    max-height: 200px;
}
.box-berita img:hover{   
width:100%;
background:#000;
opacity:.50;
}
.box-berita{    
	margin-bottom:2%;
background-color: #FFF;
border: 1px solid #bdbdbd;
border-radius: 3%;
box-shadow: 0px 3px 0px #bdbdbd;
padding:4%;
width:100%;
min-height:420px;
}

.box-berita:hover{ 
background:#bdbdbd;
}
.box-berita-title{    
	text-align: left;
    color: #383D48;
    font-size: 18px;
    padding-top: 7px;
}
.box-berita-date{
	color:#999;
	font-size:12px;
	
}
.box-berita-content{
	text-align:justify;
}
.index-detail{
	float:right;
	width:90%;
	text-align:right;
	
}/*
.index-detail span a{
	background:#4c9ed9;
	color:#fff;
	padding:1%;
	margin:1%;
	text-align:right;
	border-radius:10%;
	
}*/

this is a hack for bootstrap*/
.row-fluid ul.thumbnails li.span12 + li { margin-left : 0px; }
.row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px; }
.row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px; }
.row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; }
.row-fluid ul.thumbnails li.span2:nth-child(6n + 7) { margin-left : 0px; }
/*
#services-bar {
    background-color: #00838F;
    height: 700px;
}
*/

.list{
    padding-left:0px;
    padding-right: 30px;
}
.list ul {
    height: 300px;
    padding-left: 0;
    padding-right: 20px;
    overflow: hidden;
    overflow-y: scroll;
    word-wrap: break-word;
    list-style: none;
}

.list a{
    color:black;
    display: block;
}
.list li{    
    margin-top: 0px;
    text-align: justify;
}

.list-berita{
    padding: 10px;
}

.list-berita a:hover{
        color:white;
    text-decoration: none !important;
}
.list-berita:hover{

    background-color: #F93;
    
}
.separator-berita{
    border-style:none
	;border-top: 1px solid #ECECEC;
	border-width: 1px 0px;
    margin-bottom: 10px;
}


/*
==========================================================================================
                                POTENSI SECTION
==========================================================================================
*/

.potensi-foto-header {
    margin: 20px 0;
    font-size: 4em;
}

.potensi {
    font-weight: 300;
    color: #3498DB;
}

.foto {
    background-color: #3498DB;
    color: white;
    /*    font-size: 1.5em;*/
    font-weight: 600;
}

.potensi-section img {
    width: 100%;
    height: 100%;
}
.potensi-section {
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 2%;
	margin-right: 2%;
	background-color: #ffffff;
	border-radius: 2px;
	padding:1%;
	width:96%;
	display:inline-block;
border: 1px solid #e5e5e5;   
 box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    -moz-box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);

}


.potensi-area{
  float: left;
  width: 33.33%;
  height:200px;
  vertical-align:middle;
  background-color: #e1e1e2;
	border:1px solid #bdbdbd;
	display:inline-block;
	overflow:hidden;
}
.potensi-area a {  
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;  
	display:inline-block;
}
.potensi-area .potensi-img{
  width: 100%;
  height: 100%;  
  display:inline-block;
  background:#fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.potensi-area a:hover .potensi-img{
}
.judul-potensi {
	
    font-weight: 300;
    color: #27ae60;
    font-size: 3em;
    text-align: center;
    margin: 0!important;
/*    left: 100px !important;*/
}

.sub-judul-potensi {
    background-color: #27ae60;
    color: white;
    font-weight: 300;
}
.boxgrid {
    background-attachment: scroll;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
  float: left;
  width: 33.33%;
  height:200px;
  vertical-align:middle;
	background:#fff;
	border:1px solid #bdbdbd;
	position:relative;
    overflow: hidden;
}
.boxgrid img {
  width: 100%;
  height: 100%;  
  position:absolute;
  background:#fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.boxcaption {
	background: #fff;	
    color: #000;
    float: left;
    height: 104%;
    position: relative;
    width: 100%;
	opacity:0.9;
	padding:1%;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);	
}
.boxgrid:active {
    border-bottom-width: 5px;
    border-top-width: 7px;
}
.captionfull .boxcaption {
    left: 0;
    text-shadow: none !important;
    top: 200px;
}

.boxgrid {
    background-attachment: scroll;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
  float: left;
  width: 33.33%;
  height:200px;
  vertical-align:middle;
	background:#fff;
	border:1px solid #bdbdbd;
	position:relative;
    overflow: hidden;
}
.boxgrid img {
  width: 100%;
  height: 100%;  
  position:absolute;
  background:#fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.boxcaption {
	background: #fff;	
    color: #000;
    float: left;
    height: 104%;
    position: relative;
    width: 100%;
	opacity:0.9;
	padding:1%;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);	
}
.boxgrid:active {
    border-bottom-width: 5px;
    border-top-width: 7px;
}
.captionfull .boxcaption {
    left: 0;
    text-shadow: none !important;
    top: 200px;
}
.boxgrid .potensi-caption {
    bottom: 30px;
    font-size: 14px;
	padding:2%;
	color:#000;
    position: absolute;
}
.boxgrid .descr {
    display: none;
}
.boxgrid .potensi-title {
    color: #000;
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-shadow: none;
    text-transform: uppercase;
}
/*
/*
==========================================================================================
                                GALLERY SECTION
==========================================================================================
*/

.galeri-foto-header {
    margin: 20px 0;
    font-size: 4em;
}

.galeri {
	font-family: 'Arial';
    font-weight: 300;
    color: #3498DB;
}

.foto {
    background-color: #3498DB;
    color: white;
    /*    font-size: 1.5em;*/
	font-family: 'Arial';
    font-weight: 600;
}

.gallery-section img {
    width: 100%;
    height: 100%;
}
.gallery-section {
	margin-bottom: 2%;
	margin-left: 2%;
	margin-right: 2%;
	background-color: #ffffff;
	border-radius: 2px;
	padding:1%;
	width:96%;
	display:inline-block;
border: 1px solid #e5e5e5;
 box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    -moz-box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}


.gallery_area{
  float: left;
  width: 33.33%;
  height:200px;
  vertical-align:middle;
  background-color: #e1e1e2;
	border:1px solid #bdbdbd;
	display:inline-block;
	overflow:hidden;
}
.gallery_area a {  
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;  
	display:inline-block;
}
.gallery_area .gallery_img{
  width: 100%;
  height: 100%;  
  display:inline-block;
  background:#fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.gallery_area a:hover .gallery_img{
}

.view_btn {
	background: #d2f3ff;	
    color: #5DACC3;
    float: left;
    height: 100px;
    padding-left: 18px;
    padding-top: 12px;
    position: relative;
    width: 202px;
	height:100px;
	opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);	}

.gallery_hover:hover .view_btn{
}

.view_gal{
	display:none;
	position:absolute;
}


.galleri{
  float: left;
  width: 31.33%;
  margin:1%;
  height:200px;
  vertical-align:middle;
  background-color: #e1e1e2;
	border:1px solid #bdbdbd;
	display: block;
    position: relative;
	overflow:hidden;
}
.galleri img{
  width: 100%;
}
.galleri a {  
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;  
	display:inline-block;
}
.galleri .galleri_img{
	text-align:center;
  display:inline-block;
  background:#fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.galleri a:hover .galleri_img{
	opacity:.75;
}
.galleri a:hover .view_gal{
	display:block;
	width:100%;
	bottom:20%;
	min-height:5%;
  padding:2%;
	background:#fff;
	color:#000;
	opacity:.70;
}
.gallery_img_title{font-size:16px;text-align:left;}
.gallery_img_date{font-size:11px;font-weight:normal;}
.gallery_img_content{font-size:14px;font-weight:normal;}
.tos-caption-0{ 
  font-size: 22px;
}

.judul-galeri {font-weight: 300;
color: #2980B9;
font-size: 3em;
text-align: center !important;
margin-bottom: 10px !important;
}

.sub-judul-galeri {
    background-color: #2980B9;
    color: white;
    font-weight: 400;
}
.galleri .overlay {
    opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    height: 100%;
    position: absolute;
    text-decoration: none;
    width: 100%;
    z-index: 100;
    background: #222;
    background-color: rgba(252,214,138, 0.92);
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
}
.galleri:hover .overlay {
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.galleri .overlay .info {
    position: absolute;
    left: 0;
    top: -105px;
    z-index: 2;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    padding: 25px 25px 0 25px;
}
.galleri:hover .overlay .info {
    top: -20px!important
}
.galleri.overlay span {
    font-weight: 300;
    font-size: 14px;
    font-style: italic;
    color: #4e4e4e;
}
.overlay-buttons {
    position: absolute;
    bottom: 24px;
    left: 20px;
}
/*
==========================================================================================
                                    JSSOR SLIDER BERITA
==========================================================================================
*/


.jssor {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    left: 0px;
    width: 810px;
    height: 300px;
    overflow: hidden;
    visibility: hidden;
    background-color: #ECF0F1;
}
.carousel-caption {
    height: 60px;
    text-align: left;
    width: 100%;
    padding: 10px;
    background-color: rgb(26, 108, 181);
    background-color: rgba(0, 131, 143, 0.8);
    color: #fff;
    text-shadow: 0 -1px 0 #1a6cb5;
    position: relative;
    margin-top: 260px;
    margin-right: 120px;
    float: right;
}

.carousel-caption a p {
    font-size: 1.2em;
    width: 100%;
    padding: 10px;
    margin: 0;
    color: #fff !important;
}

.jssort11 .p {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 69px;
    background: #ECF0F1;
    /* warna thumbnail default*/
}

.jssort11 .tp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.jssort11 .i,
.jssort11 .pav:hover .i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 60px;
    height: 30px;
    border: white 1px dashed;
}

* html .jssort11 .i {
    width/**/
    : 62px;
    height/**/
    : 32px;
}

.jssort11 .pav .i {
    border: white 1px solid;
}

.jssort11 .t,
.jssort11 .pav:hover .t {
    position: absolute;
    top: 3px;
    left: 68px;
    width: 129px;
    height: 32px;
    line-height: 21px;
    text-align: left;
    color: #333; /* warna font default*/
    font-size: 13px;
    font-weight: 700;
}

.jssort11 .pav .t,
.jssort11 .p:hover .t {
    color: #fff;
    /* warna font */
}

.jssort11 .c,
.jssort11 .pav:hover .c {
    position: absolute;
    top: 38px;
    left: 3px;
    width: 197px;
    height: 31px;
    line-height: 31px;
    color: #fff;
    /* warna font hoveer*/
    font-size: 11px;
    font-weight: 400;
    overflow: hidden;
}

.jssort11 .pav .c,
.jssort11 .p:hover .c {
    color: #fff;
}

.jssort11 .t,
.jssort11 .c {
    transition: color 0s;
    -moz-transition: color 0s;
    -webkit-transition: color 0s;
    -o-transition: color 0s;
}

.jssort11 .p:hover .t,
.jssort11 .pav:hover .t,
.jssort11 .p:hover .c,
.jssort11 .pav:hover .c {
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
}

.jssort11 .p:hover,
.jssort11 .pav:hover {
    background: #00ACC1;
    /* warna thumnail hover */
}

.jssort11 .pav,
.jssort11 .p.pdn {
    background: #00838f;
    /* warna thumnail focused */
}

/*
==========================================================================================
                                FOOTER SECTION
==========================================================================================
*/

.footer-section {    
background-color: #fff;
    color: #ebeb;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -webkit-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -ms-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
    -o-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.21);
}

.copyright {
    padding: .5% 0;
    background-color: #141414;
    text-align: center;
}

.copyright p {
    color: white;
}

.copyright span {
    color: #3498DB;
}

.form-top{    
    float: right;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    padding: 1px;
    border-radius: 2px;
    height: 33px;
    font-size: 13px;
    width: 150px;
}
.form-top input{
       font-size: 95%;
    line-height: 190%;
    display: block;
    width: 85%;
    padding: 2px;
    border: 1px solid #fff;
    font-weight: normal; 
}
.form-top .btn-search-submit {
    position: relative;
	float:right;
    right: 5px;
    top: -23px;
    color: #000;
}

/*
==========================================================================================
                                MODIF NAVBAR
==========================================================================================
*/

		#topbar-quick{width:100%;position:relative;margin-top:2px;}
		#topbar-quick .topbar-quick-title {font-size:12px;font-weight:bold;text-decoration:none;padding-left:22px;line-height:30px;cursor:pointer;color:#e2e2e2; }
		#topbar-quick .tutup-title {font-size:12px;font-weight:bold;text-decoration:none;padding-left:22px;line-height:30px;cursor:pointer;color:#e2e2e2; }
		#topbar-quick .topbar-quick-content{position:absolute;top:27px;right:0;line-height:normal;background:#fff;width:100%;display:none;font-size:12px;color:#333;-moz-box-shadow:0 5px 8px #222;-webkit-box-shadow:0 5px 8px #222;box-shadow:0 5px 8px #222;z-index:10000;height:100px;}
		#topbar-quick  .topbar-view{ display:block !important;height:auto;effect:slide;}
		#topbar-quick .topbar-quick-content ul{ list-style:none;padding:0;margin:0;}
		#topbar-quick .topbar-quick-content ul li{background:#fff;padding:8px;border-bottom:1px solid #ebebeb;}
		#topbar-quick .topbar-quick-content ul ul{margin-top:4px;}
		#topbar-quick .topbar-quick-content ul ul li{background:#fff;padding:4px;border-top:1px solid #d7d2de;}
		#topbar-quick .topbar-quick-content ul li:hover{background:#d7d2de;padding:8px;}
		#topbar-quick .topbar-quick-content ul ul li:hover{background:#d7d2de;padding:4px;}
		#topbar-quick .topbar-quick-content ul li a{ color:#000;text-decoration:none;width:100%;padding-left:10px;display: block;}
		

/*
==========================================================================================
                                MEDIA QUERY
==========================================================================================
*/

.thumb {}

.thumb img {
    object-fit: scale-down;
    width: 500px;
    height: 300px;
}

.thumb p {
    margin: 0;
    color: black;
    text-align: center;
}

.header-left{ float:left;width:50%;display:block;}
.header-right{ float:right;width:50%;display:block;}
	.search2{display:block;} 

@media only screen and (min-width: 980px) {
	.potensi-section img {   max-height: 230px;}
	.panel-kanan{min-height:642px;}
	.box-public{ width:24%;float:left;margin-right:1%;}
	.box-berita{ width:32%;float:left;margin-left:1%;padding:1%;}
	.box-footer{ width:24%;float:left;margin-left:1%;padding:1%;}
	.gallery_area{ float: left;display: inline;width: 33.33%;}
    .footer-section img{ width: 20%;}
	.boxgrid{ float: left;display: inline;width: 33.33%;}
	#home{ height:600px;width:100%;}
	.home-slide{padding-top:380px;right:0;bottom:0;}
	.home-slide p.text-info {display:block;}
	.list-berita-resp{	display:none;}
	.slider-berita-kecamatan{ display:block;}
	.search2{background-color: #666;display:none;}
	.header-left{ float:left;width:45%;display:block;}
	.header-right{ float:right;width:55%;display:block;}
	.header-right1{ display:block;float:right;width:100%;padding-top:0px;}
	.header-right2{ display:block;float:right;width:100%;padding-top:7px;text-align:left;}
	.header-right-site{float:right;width:50%;color:#fff;display:block;text-align:right;}
}

@media only screen and (min-width: 1200px) {
.header-left{ float:left;width:35%;display:block;}
.header-right{ float:right;width:65%;display:block;}
/*.header-right1{ display:block;float:right;width:80%;padding-top:38px;}*/
.header-right2{ display:block;float:right;width:20%;padding-top:10px;text-align:left;}
.header-right-site{float:right;width:50%;color:#fff;display:block;text-align:right;}
    .footer-section img{ width: 10%;}
}

@media only screen and (max-width: 979px) {
.header-left{ float:left;width:95%;display:block;}
.header-right{ float:right;width:5%;display:block;}
}
@media only screen and (max-width: 980px) {
.header-left{ float:left;width:95%;display:block;}
.header-right{ float:right;width:5%;display:block;}
    .header2{ width: 100%;}
	.panel-kanan h1{ font-size:16px; }
	.panel-kanan h2{ font-size:15px; }
	.panel-kanan h3{ font-size:13px; }
    .icon { display: none; }
    .contact-section img { width: 80%; margin: 5% 10%; }
    .contact-section p {margin: 5% 10% 5%; }
    .header-row .col-md-3 { width: 10%; }
    .header-row .col-md-9 { width: 40%; }
	.box-public{ width:49%;float:left;margin-right:1%;}
	.box-berita{    width:32%;float:left;margin-left:1%;padding:1%;}
	.box-footer{    width:49%;float:left;margin-left:1%;padding:1%;}
	.list-berita-resp{	display:none;}
	.slider-berita-kecamatan{ display:block;}
    .footer-section img{ width: 20%;}
}

@media only screen and (max-width: 800px) {
.header-left{ float:left;width:95%;display:block;}
.header-right{ float:right;width:5%;display:block;}
    .header2{ width: 100%;}
    .header-row { margin-right: 0 !important;}
    .header-row .col-md-3 {width: 30%; margin-right: 0 !important;}
    .header-row .col-md-9 { width: 70%;}
	.nav-tabs > li {font-size:14px;padding:0px;margin:0;}
	.box-public{ width:49%;float:left;margin-right:1%;}
	.box-berita{    width:49%;float:left;margin-left:1%;padding:1%;}
	.box-footer{    width:49%;float:left;margin-left:1%;padding:1%;}
	.gallery_area{ float: left;display: inline;width: 50%;}
	.galleri{ float: left;width: 48%;}
	.boxgrid{ float: left;display: inline;width: 50%;}
	.judul-potensi {font-weight: 300;font-size: 2em;}
	.judul-berita {font-weight: 300;font-size: 13px;}
	.judul-galeri {font-weight: 300;font-size: 2em;}
	.list-berita-resp{	display:none;}
	.slider-berita-kecamatan{ display:block;}
}

@media only screen and (max-width: 600px) {
    .contact-section p { text-align: left; }
	.box-public{ width:48%;float:left;margin-right:1%;}
	.box-footer{    width:96%;float:left;padding:2%;}
	.story-home-cat-img{ display:none; }
	.boxgrid{ float: left;display: inline;width: 50%;}
	.list-berita-resp{	display:block;}
	.slider-berita-kecamatan{ display:none;}
    .footer-section img{ width: 30%;}
	
}

@media only screen and (max-width: 500px) {
	.galleri{ float: left;display: inline;width: 100%;height:200px;}
	.judul-potensi {font-weight: 300;font-size: 1.5em;}
	.judul-galeri {font-weight: 300;font-size: 1.5em;}
}
@media only screen and (max-width: 400px) {
    .galeri-foto-header { font-size: 3em; }
    .thumb img { height: 200px; }
	.box-public{ width:100%;float:left;}
	.box-berita{    width:96%;float:left;padding:2%;}
	.box-footer{    width:96%;float:left;padding:2%;}
	.gallery_area{ float: left;display: inline;width: 100%;}
	.galleri{ float: left;display: inline;width: 100%;height:150px;}
	.boxgrid{ float: left;display: inline;width: 100%;}
    .footer-section img{ width: 40%;}
    .header2 p{ width: 80%;text-align: center;}
}


/*
==========================================================================================
                               BERITA
==========================================================================================
*/



/*
==========================================================================================
                            SLIDER
==========================================================================================
*/

		.slider-img-caption{
		}
		.slider-img-sampel{
			display:none;
		}
		.slider-img-box{
			width:100%;background:#fff;min-height:100px;padding:10px;display:inline-block;
		}
	.standat{
	width:80%;float:right;right:0;margin-right:0;padding-right:0; }
		.carousel-indicators .active{ background: #31708f; } 
		.content{  } 
		.adjust1{ float:left; width:100%; margin-bottom:0; }
		.adjust2{ margin:0; } .carousel-indicators li{ border :1px solid #ccc; } 
		.carousel-control{ color:#31708f; width:5%; } .carousel-control:hover, 
		.carousel-control:focus{ color:#31708f; } .carousel-control.left,
		.carousel-control.right { background-image: none;padding-top:20px;} 
		.carousel-control.left{ }
		.media-object{ margin:auto; }
		@media screen and (max-width: 768px) {
		.media-object{ margin-top:0; }
		}
			
@media only screen and (min-width: 992px) {
	.slider-img-sampel{
		display:block;
		float:left;
		width:130px;height:80px;margin-right:10px;display:block;
	}
	.slider-img-sampel img{ width:130px; height:90px;}
	.slider-img-caption{
		float:right;
		width:470px;
		height:80px;
	}
	.standat{
	width:640px;float:right;}
		.slider-img-box{
			width:640px;background:#fff;min-height:110px;padding:10px;display:inline-block;
		}
		.carousel-inner .active{float:right;}

 }