/* general seting */
	iframe.fullwidth{
		border: none;
		width: 100%;
		height: 1080px;
	}

	@font-face{
		font-family: segoeui;
	    src: url("../fonts/segoeui.ttf");
	}

	body{
		margin-top: 60px;
	}

  .content img {
  	width: 100%;
  	height: 100%;
  }

	*{
		--borderColor:#AFAFAF;
		--mainBgColor:#065880;
		--shadeColor:grey;
		--hoverColor:#f6f6f6;
		--wellBgColor:#f5f5f5;
		font-family: segoeui,arial;
	}

	.img-100{
		width: 100% !important;
	}

	.header {
		font-size: 20pt;
		text-align: center;
		border-bottom: 1px solid #DEDEDE;
		padding: 10px;
		margin-bottom: 10px;
	}

	.navbar-brand img {
		width: 120px;
		top: 10px;
		position: absolute;
	}


	.nav-social .icon a {
		max-height: 50px;
		display: inline-block;
		top: -5px;
		font-size: 20pt;
	}

	.nav-social .icon a span{
		color: #FFF !important;
	}

	.nav-social .icon a:hover,
	.nav-social .icon a:hover span,
	.nav-social .icon a:focus,
	.nav-social .icon a:active{
		background: transparent !important;
	}

	.carousel-caption h4 {
		color: #ffd800;
		font-weight: bold;
	}

	.dropdown-menu{
		width: -moz-fit-content;
	}

/* footer */
	#page-footer{
		margin-top:30px;
	}

	.navbar-footer{
		margin-bottom: 0px;
	}

	.footer-info {
		text-align: center;
		background: #111;
		color: #FFF;
		padding: 10px 0px;
	}

	.footer-info a{
		display: inline;
	}
/* sub menu page*/

	.latest-ctr a {
		text-decoration: none;
		background: #6e6e6e;
		display: block;
		color: #FFF;
		transition: 0.5s all ease;
	}

	.latest-heading{
		font-size: 16pt;
		font-weight: bold;
		background: #4b4b4b;
		padding: 10px;
	}

	.latest-excerpt{
		padding: 10px;
	}

	.latest-ctr a:hover{
		background: var(--mainBgColor);
	}

	.list-ctr{
		border : 1px solid #DEDEDE;
		border-top : none;
	}

	.list-ctr .list-header {
		background: var(--mainBgColor);
		padding: 10px;
		font-size: 12pt;
		font-weight: bold;
		color: #FFF;
	}

	.list-ctr a {
		display: inline-flex;
		padding: 10px;
		border-bottom: 1px dashed #DEDEDE;
		width: 100%;
	}

	.list-ctr a span:first-child{
		width: 90%;
	}

	.list-ctr a span:last-child{
		width: 10%;
		height: 19px;
	}

	.list-ctr a:last-child {
		border-bottom: none;
	}

	.list-ctr a:hover {
		background: var(--hoverColor);
	}

	.badge{
		background: #065880;
	}

	.flex-box{
		display: inline-flex;
	}

	.singlepost-ctr {
		padding: 10px;
		margin-bottom: 10px;
		text-decoration: none !important;
		color: #242424;
		width: 100%;
		display: inherit;
		border-bottom: 1px dashed #bababa;
		transition: 0.5s all ease;
	}

	.singlepost-ctr:hover{
		border-bottom: 1px dashed var(--mainBgColor);
	}

	.singlepost-ctr .img-ctr{
		display: inline-block;
	}

	.singlepost-ctr .img-ctr img{
		width: 200px;
	}

	.singlepost-header{
		padding-bottom: 5px;
		border-bottom: 1px solid #aaa;
		margin-bottom: 5px;
	}

	.singlepost-header .title{
		font-size: 14pt;
		color: #ffbd00;
	}

	.singlepost-header .date{
		display: block;
		font-size: 9pt;
	}

	.singlepost-ctr .info{
		padding-left: 10px;
		text-align: justify;
		width: 100%;
	}

	.singlepost-footer {
		font-size: 9pt;
		font-style: italic;
		background: #323232;
		padding: 10px;
		margin: 0px -10px -10px -10px;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	.wpp-list li{
		position: relative;
	}

	.wpp-list .badge{
		position: absolute;
		top:5px;
		right: 5px;
	}

/* latest,popular,random*/
	.lrp-wraper{
		margin-top: -15px;
	}

	.tab-pane .wpp-list{
		padding: 0px;
		margin: 0px;
	}

	.tab-pane .wpp-list li a,
	.lrp-ctr {
		display: inline-flex;
		padding: 10px;
		border-bottom: 1px dashed #DEDEDE;
		cursor: pointer;
		text-decoration: none !important;
		width: 100%;
		position: relative;
		min-height: 61px;
	}

	.tab-pane .wpp-list li:last-child a,
	.lrp-ctr:last-child {
		border-bottom: none;
	}

	.tab-pane .wpp-list li a:hover,
	.lrp-ctr:hover {
		transition: 0.5s all ease;
		background: var(--hoverColor);
	}

	.col-ctr .tab-content{
		border: 1px solid #DEDEDE;
		border-top: none;
	}

	.lrp-ctr .title-ctr{
		width: 80%;
	}

	.lrp-ctr .date-ctr {
		background: #ffffda;
		padding: 10px;
		text-align: center;
		position: absolute;
		top: 0px;
		right: 0px;
		height: 100%;
	}

	.date-ctr > div {
		font-size: 9pt;
		line-height: 10pt;
	}
/* single page*/
	#single-ctr .single-header .title {
		padding: 5px 0px;
		font-size: 20pt;
	}

	#single-ctr .single-header .info {
		padding: 5px;
		color: #838383;
		background: whitesmoke;
		margin-bottom: 5px;
		font-size: 8pt;
	}

	#single-ctr .content {
		padding: 10px 0px;
		text-align: justify;
	}

	#single-ctr .footer {
		padding: 10px 0px;
		border-top: 1px dashed #DEDEDE;
	}

	.nav-tabs{
		display: inline-flex;
		width: 100%;
		text-align: center;
		font-size: 80%;
	}

	.nav-tabs li{
		width: 33.333%;
	}

	.nav-tabs li a {
		border-radius: 0px;
		margin: 0px;
		border: 1px solid #DEDEDE !important;
		transition: 0.5s all ease;
		background: #065880;
		color: #FFF !important;
	}

	.nav-tabs li a:hover {
		background: #446c90;
	}

	.nav-tabs li.active a {
		background: #054260 !important;
	}

/* pejabat */

	.level-1-ctr img{
		width: 250px;
	}

	.level-2-ctr img{
		max-width: 200px;
	}

	.level-3-ctr img{
		max-width: 130px;
	}

	.level-1-ctr {
		background: #f9f9f9;
		margin-bottom: 10px;
		border: 1px solid #bababa;
		border-radius: 3px;
	}

	.unit-wraper {
		background: #f9f9f9;
		border: 1px solid #bababa;
		margin-bottom: 10px;
		border-radius: 3px;
	}

	.unit-name-ctr {
		padding: 10px;
		background: #d8d8d8;
		font-size: 19pt;
		border-bottom: 1px solid #d4d4d4;
		font-weight: bold;
	}

	.pejabat-row .col-ctr{
		padding: 10px;
	}

	.col-ctr.level-2-ctr,
	.col-ctr.level-3-ctr{
		display: inline-flex;
		width: 100%;
	}

	.col-ctr.level-2-ctr .content-ctr,
	.col-ctr.level-3-ctr .content-ctr{
		margin-left: 10px;
	}

	.level-1-ctr .jabatan{
		font-size: 22pt;
		font-weight: bold;
	}

	.level-1-ctr .nama{
		font-size: 20pt;
		font-style: italic;
	}

	.level-2-row{
		margin-bottom: 0px;
	}

	.col-ctr.level-2-ctr {
		border-bottom: 1px solid #e3e3e3;
	}

	.level-2-ctr .jabatan{
		font-size: 18pt;
		font-weight: bold;
	}

	.level-2-ctr .nama{
		font-size: 16pt;
		font-style: italic;
	}

	.level-3-row .col-ctr{
		min-height: 150px;
	}

	.level-3-row>div{
		border-right: 1px solid #e3e3e3;
		padding:0px;
	}

	.level-3-row>div:first-child{
		padding-left:15px;
	}

	.level-3-row>div:last-child{
		padding-right:15px;
		border-right:none;
	}

	.level-3-ctr .img-ctr{
		width: 150px;
	}

	.level-3-ctr .content-ctr{
		width: 100%;
	}

	.level-3-ctr .jabatan{
		font-size: 14pt;
		font-weight: bold;
	}

	.level-3-ctr .nama{
		font-size: 11pt;
		font-style: italic;
	}

/* informasi publik */
	.col-infopublik .content{
		display: block;
		text-decoration: none;
	}

	.col-infopublik .title{
		font-size: 16pt;
	}

	.col-infopublik .excerpt{
		display: block;
	}

	.col-infopublik .footer {
		border-top: 1px dashed #DEDEDE;
	}

	.col-infopublik .footer-text {
		font-size: 9pt;
		color: #747474;
	}

/* gallery */
	.img-responsive.album-cover-img {
		max-height: 150px;
		width: inherit;
		margin: 10px auto;
	}

	.galeri-item-ctr {
		width: 206px;
		height: 206px;
		background-position: center center;
		background-size: 400px;
		display: inline-block;
		margin: 0px 2px;
		border-radius: 3px;
		border: 1px solid #b3b3b3;
		cursor: pointer;
	}

	.col-galeri {
		text-align: center;
		overflow: auto;
		display: block;
		background: whitesmoke;
		padding: 10px 0px;
		border-radius: 3px;
	}

	.close-modal{
		position: absolute;
		top: 5px;
		right: 10px;
		color: #FFF !important;
	}

	.modal{
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		top:0px;
		overflow: auto;
		text-align: center;
		z-index:9999999999;
	}

	.modal img {
		margin: 30px auto;
		padding: 3px;
		background: white;
		border-radius: 3px;
		max-width: 97%;
	}

	.modal .img-wrap {
		display: inline-block;
		position: relative;
	}

	.modal .img-wrap .glyphicon {
		color: #FFF;
		position: absolute;
		font-size: 16pt;
		top: 45%;
		padding: 10px;
		background: rgba(50,50,50,0.5);
		border-radius: 30px;
		line-height: 24px;
		cursor: pointer;
	}

	.modal .img-wrap .glyphicon:hover {
		background: rgba(50,50,50,0.8);
	}

	.modal .img-wrap .left-arrow{
		left:-5px;
	}

	.modal .img-wrap .right-arrow{
		right:-5px;
	}

	.col-content-fixed{
         position: fixed;
         top: 55px;
         padding-right: 10px;
         overflow: auto;
         max-height: 65%;
	}

	.col-galeri .vid{
		width: 206px;
	}

	.vid.item-modal{
		max-width: 70%;
	}

	.vid.galeri-item-ctr{
		height: auto;
		cursor: pointer;
	}

	.fp-title-album {
		background: var(--mainBgColor);
		padding: 10px;
		color: #FFF;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
		overflow: hidden;
	}

	.dropdown-menu > li > a{
		white-space: normal !important;
	}


/*Media Query*/

	@media (max-width: 768px) {
		.col-ctr{
			margin:10px 0px;
		}

		.level-1-ctr img,
		.level-2-ctr img,
		.level-3-ctr img{
			width: 100%;
		}

		.level-3-row>div{
			padding:15px;
		}
	}

	@media (min-width: 768px) and (max-width: 992px) {
		.col-ctr{
			margin:10px 0px;
		}

		.level-1-ctr img,
		.level-2-ctr img,
		.level-3-ctr img{
			width: 100%;
		}

		.level-3-row>div{
			padding:15px;
		}
	}
