*{
	--hexaWidth:150px;
	--hexaColor:rgba(100,100,100,0.3);
	--hexaHoverColor:rgba(100,100,100,0.5);
	--hexaHeight:calc(var(--hexaWidth)*0.6);
}

@font-face{
	font-family: kaushan;
    src: url("../fonts/kaushanscript-regular.otf");
}


@font-face{
	font-family: seguibl;
    src: url("../fonts/seguibl.ttf");
}

/* header carousel */
	.carousel-inner img{
		width: 100%;
	}

	#header-col {
		padding: 0px;
		margin-top: -9px;
		box-shadow: 0px 14px 10px -13px rgba(100,100,100,0.5);
	}

/* row heading */
	.row-heading{
		display: flex;
	}

	.row-heading .border {
		border-top: 1px solid var(--mainBgColor);
		width: 100%;
		position: relative;
		top: 12px;
	}

/* info list */
	.info-list-footer a,
	.info-list-ctn a{
		display: flex;
		padding: 10px 0px;
		text-decoration: none !important;
		color:#818181;
		border-bottom: 1px dashed #DEDEDE;
		transition: 0.5s all ease;
	}

	.info-list-footer a span:first-child,
	.info-list-ctn a span:first-child{
		display: inline-block;
		width: 25px
	}

	.info-list-footer a span:last-child,
	.info-list-ctn a span:last-child{
		width: 100%;
	}

	.info-list-footer a:hover,
	.info-list-ctn a:hover{
		color:#242424;
		border-bottom: 1px dashed #242424;
	}

/* news carousel*/
	.custom-img-label {
		position: absolute;
		background: rgba(50,50,50,0.8);
		display: block;
		z-index: 999 !important;
		bottom: 0px;
		color: #FFF;
		text-decoration: none;
		padding: 10px;
		transition: 0.5s all ease;
		width: 100%;
	}

	.custom-img-label:hover {
		background: rgba(50,50,50,1);
		text-decoration: none;
		color: #FFF;
	}

	.custom-img-label .title-ctr {
		font-size: 17pt;
		margin-bottom: 5px;
		color: #ffd313;
	}

	.side-news .tab-content{
		border: none !important;
	}
	
	.side-news .nav li{
		width: 50% !important;
	}

	.side-news-title{
		display: block;
		font-size: 16pt;
		color: #232323;
		font-weight: bold;
		text-decoration: none !important;
	}

/* row 3 */
	.app-item-wrap{
		max-width: 695px;
		margin: 0 auto;
	}

	.app-row {
		background-image: url("../../../uploads/web_assets/app_background.jpg");
		margin-top: 20px;
		box-shadow: 0px 14px 10px -13px rgba(100,100,100,0.5);
		background-size: 100% 100%;
		padding: 30px 0px;
	}

	#app-col{
		padding: 0px 90px;
	}

	#app-col .row>div{
		padding: 3px;
	}
	
	#app-col .row>div>a{
		transition: 0.3s all ease;
	}

	#app-col .row>div>a:hover{
		background: #fff9ca;
		display: block;
		border-radius: 28px;
	}

	.app-row-title{
		margin-bottom: 20px;
	}

	.row-heading .title,
	.app-row-title .title {
		font-family: seguibl !important;
		white-space: nowrap;
		font-size: 14pt;
		padding-right: 15px;
		color: var(--mainBgColor);
	}

	.info-pub-item {
		display: block;
		color: var(--mainBgColor);
		padding: 5px 0px;
		font-size: 12pt;
		font-weight: bold;
	}

	.info-pub-item span:first-child{
		margin-right: 10px;
	}
/* row 4 galery*/
	.galery-row{
		margin-top: 20px;
	}

	.fp-galery-img {
		width: 100%;
		height: 200px;
		display: block;
		background-position: center;
	}

	.album-foto-terbaru {
		display: block;
		text-align: center;
		margin-bottom: 10px;
		height: 30px;
		position: relative;
	}

	.album-foto-terbaru .title{
		display: inline-block;
		background: #FFF;
		z-index: 9;
		position: relative;
		padding: 0px 10px;
	}

	.album-foto-terbaru .border {
		position: absolute;
		display: inline-block;
		top: 15px;
		width: 500px;
		left: 330px;
	}

	#poling-header p {
		font-family: kaushan;
		font-size: 20pt;
		color: var(--mainBgColor);
	}

	.col-ctr.poll-ctr {
		background: #e7e7e7;
		padding: 10px;
	}

	#polls-1-ans > p {
		font-size: 12pt;
		display: inline;
		margin-right: 2px;
	}

	#polls-1-ans > p input {
		border: none;
		background: #d5ff00;
		border-radius: 3px;
		padding: 0px 10px;
		border:1px solid #ddce2b;
	}

	#polls-1-ans > p a{
		border: none;
		background: #d5ff00;
		border-radius: 3px;
		text-decoration: none;
		color: black;
		padding: 0px 10px;
		border:1px solid #ddce2b;
	}

/* dokumen */
	#border-erase-1 {
		width: 251px;
		height: 3px;
		background: white;
		position: absolute;
		left: 967px;
		top: -3px;
	}

	#border-erase-2 {
		background: linear-gradient(white,#f5fcff);
		height: 45px;
		width: 5px;
		position: absolute;
		left: 1213px;
	}

	.doc-row {
		background-image: url("../../../uploads/web_assets/doc_background.jpg");
		background-size: 100% 100%;
		padding: 25px 0px;
		box-shadow: 0px 14px 10px -13px rgba(100,100,100,0.5);
	}

	.doc-row .col-ctr {
		max-width: 1300px;
		min-height: 470px;
		margin: 10px;
		border: 3px solid var(--mainBgColor);
		position: relative;
		margin: 0 auto;
	}

	.doc-row .hex-wrap {
		display: inline-block;
		left: 80px;
		position: absolute;
		height: 100%;
	}

	.hex-wrap .doc-title{
		font-family: segoeui;
	}

	.img-doc-rencana {
		width: 370px;
		position: absolute;
		left: 377px;
		bottom: 0px;
	}

	.hex-wrap .doc-title {
		font-family: kaushan;
		position: absolute;
		display: inline-block;
		left: 945px;
		font-size: 40pt;
		color: var(--mainBgColor);
		top: -26px;
		padding: 0px 30px;
		z-index: 2;
	}

	.hexagon:before,
	.hexagon:after {
		border-left:calc(var(--hexaWidth)/2) solid transparent;
		border-right:calc(var(--hexaWidth)/2) solid transparent;
		content: "";
		display: block;
		position: absolute;
		cursor: pointer;
	}

	.hexagon:before {
		border-top:30px solid transparent;
		border-bottom:30px solid var(--hexaColor);
		top: -60px;
		transition: 0.3s all ease;
	}

	.hexagon:after {
		border-top:30px solid var(--hexaColor);
		border-bottom:30px solid transparent;
		bottom: -60px;
		transition: 0.3s all ease;
	}

	.hexagon {
		width: var(--hexaWidth);
		height: var(--hexaHeight);
		position: absolute;
		background: var(--hexaColor);
		display: inline-block;
		transition: 0.3s all ease;
		text-align: center;
		vertical-align: middle;
		text-decoration: none !important;
	}

	.hexagon:hover:before{
		border-bottom:30px solid var(--hexaHoverColor);
	}

	.hexagon:hover:after {
		border-top:30px solid var(--hexaHoverColor);
	}

	.hexagon:hover{
		background: var(--hexaHoverColor);
	}

	.icon-wraper {
		width: 130px;
		margin: 0 auto;
		font-weight: bold;
		color: black;
	}

	#hex-1{
		top: 60px;
		left: 20px;
	}

	#hex-2{
		top: 60px;
		left: 175px;
	}

	#hex-3 {
		top: 60px;
		left: 330px;
	}

	#hex-4 {
		top: 60px;
		left: 485px;
	}

	#hex-5 {
		top: 60px;
		left: 640px;
	}

	#hex-6 {
		top: 61px;
		left: 795px;
	}

	#hex-7 {
		top: 184PX;
		left: 98px;
	}

	#hex-8 {
		top: 185px;
		left: 253px;
	}

	#hex-9 {
		top: 185px;
		left: 718px;
	}

	#hex-10 {
		top: 185px;
		left: 873px;
	}

	#hex-11 {
		top: 309px;
		left: 19px;
	}

	#hex-12 {
		top: 309px;
		left: 175px;
	}

	#hex-13 {
		top: 309px;
		left: 796px;
	}

	#hex-14 {
		left: 950px;
		top: 309px;
	}

	.doc-icon{
		width: 60px;
	}

	.mobile-icon-wraper {
		display: flex;
		padding: 10px;
		font-size: 12pt;
		color: black;
		border-bottom: 1px dashed black;
	}

	a:last-child .mobile-icon-wraper{
		border-bottom: none;
	}

	.mobile-icon-wraper div{
		margin-left: 10px; 
	}

	.mobile-doc-title {
		font-size: 25pt;
		margin-bottom: 10px;
		display: block;
		font-family: kaushan;
		padding: 0px 10px;
	}

	.mobile-doc-item {
		text-decoration: none !important;
	}
/* footer */
	.footer-navbar-nav{
		width: 100%;
		text-align: center;
	}

	#menu-footer-menu li {
		float: none;
		display: inline-block;
	}

/* google search overide*/
	.gsib_b,
	.gsc-search-button{
		display: none;
	}

	.gsc-input-box {
		border: none !important;
		background: none !important;
	}

	input.gsc-input {
		height: 35px !important;
		width: 100%;
		top: 7px !important;
		position: relative !important;
		border-radius: 7px !important;
		padding-left: 10px !important;
		border: 2px solid #054260 !important;
	}

	.gsc-input-box-focus{
		height: 0px !important;
	}

	.gsib_a .gsc-input{
		margin-bottom: 25px !important;
		background: #FFF !important;
		text-indent: 0px !important;
	}

	.gsc-search-box tbody,
	.gsc-search-box tr,
	.gsc-search-box td,
	.gsc-search-box table{
		width: 180px !important;
		display: block !important;
	}

	.gsc-branding-img{
		display: none !important;
	}

	.wgs_wrapper{
		margin-right: 10px;
	}


/*gsc*/
	td.gsib_b,.gsst_a{
		display: none !important;	
	}


/*temp content*/
	.temp-content a{
		background: #065880;
		font-size: 12pt;
		color: #FFF;
		border-radius: 0px 3px 3px 0px;
		position: fixed;
		bottom: 10px;
		z-index: 99999999;
		text-align: right;
		cursor: pointer;
		padding: 10px;
		box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.3);
		color: #FFF;
	}

/*countdown*/
	.header-banner-ctr{
		position: relative;
	}

	.banner-info {
		position: absolute;
		color: #FFF;
		font-size: 15pt;
		text-align: center;
		width: 44.2%;
		top: 52%;
		right: 0px;
	}
	
	#countdown-ctr{
		padding-bottom: 10px 0px;
	}

	#countdown-ctr > div {
		display: inline-block;
		padding: 0px 10px;
		border-top: 2px solid #FFF;
	}

	#countdown-ctr .number{
		font-size: 35pt;
		font-weight: bold;
		line-height: 30pt;

	}

	#countdown-ctr .label {
		margin: 10px 0px 5px 0px;
		font-size: 10pt;
	}

	.live-streaming {
		text-align: center;
		color: #FFF !important;
		background: #2c6986;
		display: block;
		font-size: 30PT;
		padding: 10px 0px;
	}

/*Media Query*/
	@media (max-width: 768px) {
		#app-col{
			padding: 0px;
		}

		.navbar-collapse.collapse.in{
			padding-bottom: 15px;
		}

		.app-row {
			background-size: auto 100%;
		}

		.doc-row {
			background-size: auto 100%;
		}
		.gsc-search-box tbody,
		.gsc-search-box tr,
		.gsc-search-box td,
		.gsc-search-box table{
			width: 100% !important;
		}
	}

	@media (min-width: 768px) and (max-width: 992px) {
		#app-col{
			padding: 0px;
		}

		.navbar-collapse.collapse.in{
			padding-bottom: 15px;
		}

		.app-row {
			background-size: auto 100%;
		}

		.doc-row {
			background-size: auto 100%;
		}
		.gsc-search-box tbody,
		.gsc-search-box tr,
		.gsc-search-box td,
		.gsc-search-box table{
			width: 100% !important;
		}
	}