@charset "UTF-8";

* {
	font-family: Roboto, Arial, sans-serif;
}
html {
		/*font-family: sans-serif;*/
		font-size: 100%; 
		-webkit-text-size-adjust: 100%; 
		-ms-text-size-adjust: 100%;
}
html, button, input, select, textarea {
		color: #767676;
}
html, body {
		overflow-x: hidden;
		width: 100%;
		min-height: 100%;
}
body {
	margin: 0;
	height: 100%;
	font-size: 14px;
	font-weight: 400;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	/*background-color: #dedede;*/
	background: #f6f8f9 url(/images/background.png) repeat fixed center center;

}
#old-browser-blocker {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 23154252;
	font-size: x-large;
	padding: 40px 20px;
}
#old-browser-blocker > * {
	display: table;
	width: 100%;
	height: 100%;
}
#old-browser-blocker > * > * {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#old-browser-blocker > * > * > * {
	display: inline-block;
	text-align: left;
	width: 100%;
	max-width: 800px;
}
#old-browser-blocker > * > * > * ul {
	padding-left: 1.4em !important;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
/* ==========================================================================
Typography
========================================================================== */
p {
	font-family: "Roboto", Arial, sans-serif; 
	font-weight: normal;
}
a { 
		background-color: transparent; 
		color: #000;
		-webkit-transition:all 0.3s;
		-moz-transition:all 0.3s;
		transition:all 0.3s;
}

a:focus, a:active, a:hover {
		outline: none;
		text-decoration: none;
		color: #000;
}

h1,h2,h3,h4,h5 {
		font-family: 'Roboto', sans-serif;
}

b, strong {
		font-weight: bold
}
blockquote {
		margin: 0px
}

/*p, pre {
		margin: 1em 0
}*/
code, kbd, pre, samp {
		font-size: 1em;
		font-family: monospace, serif;
		_font-family: 'courier new', monospace;
}

pre {
		white-space: pre;
		white-space: pre-wrap;
		word-wrap: break-word;
}
iframe{
		border: none;
		max-width: 100%;
		max-height: 100%;
}
q {
		quotes: none
}

q:before, q:after {
		content: '';
		content: none;
}
small {
		font-size: 75%
}
sub, sup {
		position: relative;
		vertical-align: baseline;
		font-size: 75%;
		line-height: 0;
}
sup {
		top: -0.5em
}
sub {bottom: -0.25em}
img{max-width: 100%;}
.no-margin {margin: 0;}
.text-centered{text-align: center;}
.title-hero{font-size: 3em;}
.caption-hero{font-size: 20px;}
a.btn-read-more{
		display: inline-block;
		padding: 5px 16px;
		background-color: #000;
		/*border: 1px solid #000;*/
		border-radius: 15px;
		color : #ffffff;
		cursor: pointer;
		-webkit-transition:all 0.3s;
		-moz-transition:all 0.3s;
		transition:all 0.3s;
		box-shadow: none;
		text-decoration: none;
		white-space: nowrap;
}
a.btn-read-more:hover {
		background-color: #083D5E;
		color: #FFFB24;
}
/*=============================================================
General layout
==============================================================*/
#wrapper {
		width: 100%;
		height: 100%;
		display: table;
		overflow: hidden;
		table-layout: fixed; 
}
.box-section{margin: 20px 0;}
.page-menu{
		width: 100%;
		background: #2980BB;
		color: #ffffff;
}
.page-content{
		background-color: #4ea8e5;
		width: 100%;
		margin: 0;
		margin-bottom: 0;
		color: #ffffff;
}
/*=============================================================
Header 
===============================================================*/

.navbar{
	border-radius: 0;
	background-color: #FFF;
	border: none;
	margin-bottom: 0 !important;
	padding-top: 10px;
	padding-bottom: 10px;
}
.navbar .navbar-nav>li>a {
	color: #ffffff;
}
.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:active {
	color: #ebe029;
}
.navbar-nav>li>a {
	padding-top: 25px;
	padding-bottom: 15px;
	/*font-family: 'Arial', sans-serif;*/
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	/*line-height: 80px;*/
	text-shadow:none;
}
.navbar-right > li {
	float: left;
}
.navbar-right > li:not(:last-child) {
	padding-right: 4px;
}
.navbar-right > li > a {
	border-radius: 0 !important;
}
.navbar-header {
	float: left;
}
.header-frontend .nav li a:hover,
.header-frontend .nav li a:focus,
.header-frontend .nav li.active a,
.header-frontend .nav li.active a:hover,
.header-frontend .nav li a.dropdown-toggle:hover,
.header-frontend .nav li a.dropdown-toggle:focus,
.header-frontend .nav li.active ul.dropdown-menu li a:hover,
.header-frontend .nav li.active ul.dropdown-menu li.active a{
		color: #ebe029 ;
		/*background-color: #f77b6f;*/
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
}


.header-frontend .navbar-default .navbar-nav > .open > a,
.header-frontend .navbar-default .navbar-nav > .open > a:hover,
.header-frontend .navbar-default .navbar-nav > .open > a:focus {
		color: #ebe029;
		/*background-color: #f77b6f;*/
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
}
.navbar-right{
	float: right;
	/*padding-top: 20px;*/
	list-style-type: none;
}
.logo-faceoffice {
		/*background-image: url(/images/face_office.png);*/
		display: inline-block;
		width: 115px;
		height: 65px;
}

/*=============================================================
End of header
===============================================================*/
/* ==============================================================
	Sowcase link
	================================================================*/
	.showcase-link{
		height: 220px;
		margin: 1px 0;
}
.showcase-link .showcase-link-box{
		/*background: #468ea8;*/
		padding: 40px;
		width: 100%;
		height: 100%;
}
.showcase-link .showcase-link-box a{
		color: #161616;
}
.showcase-link .showcase-link-box span{
		font-size: 6em;
		display: block;
		transition: all .2s ease-in-out;
		color: #161616; 
}
.showcase-link .showcase-link-box p{
		font-size: 16px;
		display: block;
		transition: all .2s ease-in-out;
		color: #161616; 
}
.showcase-link .showcase-link-box:hover span{
		transform: translateY(-8px);
		color: #2980BB;
}
.showcase-link .showcase-link-box:hover p{
		transform: translateY(-8px);
		color: #2980BB;
}
.showcase-link .showcase-link-box:hover a{
		color: #2980BB;
}
 /* ==============================================================
	 Sowcase menu
	 ================================================================*/
	 .showcase-menu{
			 height: 200px;
			 margin: 1px 0;
	 }
	 .showcase-menu .showcase-menu-item{
			 /*background: #468ea8;*/
			 padding: 40px;
			 width: 100%;
			 height: 100%;
	 }
	 .showcase-menu .showcase-menu-item a{
			 color: #ffffff;
			 transition: all .2s ease-in-out;
	 }
	 .showcase-menu .showcase-menu-item span{
			 font-size: 6em;
			 display: block;
	 }
	 .showcase-menu .showcase-menu-item p{
			 font-size: 16px;
			 display: block; 
	 }
	 .showcase-menu .showcase-menu-item:hover a{
			 color: #161616;
	 }
	/* ==============================================================
		Sowcase content
		================================================================*/
.showcase-content{
	padding: 20px 10px 10px;
	/* height: 100%; */
		/*margin-top: 10px;*/
	}
.showcase-content .showcase-content-item{
		/*box-shadow: rgba(0,0,0,0.22) 0px 1px 2px;*/
		height: 100%;
}
.showcase-content .empty-content{
		padding: 20px;
		/*-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);*/
		/*-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);*/
		/*-o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);*/
		/*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);*/

}
.showcase-content .empty-content p{
		color: #fff;
		font-size: 20px;
}
	 /* ==========================================================================
	 BPHN Slider
	 ========================================================================== */
.bphn-slider {
		 position: relative;
		 /*padding: 10px 50px;*/
		 height: 100%;
		 /*background-color: #3F6184;*/
 }
.bphn-slider .bphn-slider-item{
		min-height: 180px;
		width: 100%;
}
.bphn-slider .bphn-slider-item h3{
		font-size: 22px;
		margin-top: 0;
		overflow: hidden;
		text-overflow: ellipsis;
}
.bphn-slider .bphn-slider-item p{
		margin-bottom: 20px;
		font-size: 14px;
		white-space: pre-line;
}
 .bphn-slider ul {
		 margin: 0;
		 padding: 0;
		 list-style: none;
 }
 .bphn-slider ul li {
		 width: 100%;
 }
 .bphn-slider li h1 {
		 margin-bottom: 15px;
		 /*color: #fff;*/
		 font-weight: 400;
		 font-size: 22px;
 }
 .bphn-slider li p {
		 /*color: #fff;*/
		 font-size: 14px;
 }
 .slides li h1 {
		 margin: 0;
		 padding: 0;
 }
 .bphn-slider .flickity-page-dots {
		 text-align: left;
		 margin-top: 10px;
		 position: static;
 }
 .bphn-slider .flickity-page-dots .dot {
		 margin: 0 12px 0 0;
 }
.flickity-prev-next-button {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		background: transparent;
 }
.flickity-prev-next-button:hover {
		background: none;
}
 /* arrow color */
.flickity-prev-next-button .arrow {
	 /*fill: white;*/
}
 .flickity-prev-next-button.no-svg {
	 /*color: white;*/
 }
	 /* ==========================================================================
	 Download dokumen
	 ========================================================================== */
.download-dokumen{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%; 
	line-height: 28px;
}
.download-dokumen li{
	border-bottom: 1px solid #000;
	/*position: relative;*/
	display: table;
	width: 100%;
	min-height: 48px;
	margin-bottom: 10px;
}
.download-dokumen li:last-child {
	margin-bottom: 0;
	border-bottom: none;
	min-height: 46px;
}
.download-dokumen .downloadbox-title{
	font-size: 18px;
	display: table-cell;
	vertical-align: middle;
	font-weight: 400;
	white-space: pre-wrap;
}
.download-dokumen li a{
	display: table-cell;
	vertical-align: middle;
}
.bphn-btn-download {
	border-radius: 0;
	color: #ffffff;
	background-color: #000;
	-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
	-webkit-transition: -webkit-box-shadow 0.15s ease-out;
	-moz-transition: -moz-box-shadow 0.15s ease-out;
	-o-transition: -o-box-shadow 0.15s ease-out;
	transition: box-shadow 0.15s ease-out;
}
.bphn-btn-download:hover {
	color: #000;
	-webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
}
.bphn-btn-download:active,
.bphn-btn-download:focus {
	color: #000;
	-webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
}
.bphn-btn-download.disabled,
.bphn-btn-download[disabled],
.pager .disabled .btn-raised {
	-webkit-box-shadow: none;
	box-shadow: none;
}
	 /* ==========================================================================
	 Custom Slider Controls (Flickity)
	 ========================================================================== */
.flickity-page-dots .dot {
		 width: 13px;
		 height: 13px;
		 opacity: 1;
		 background: transparent;
		 border: 2px solid #ffffff;
		 -webkit-transition: background 0.3s;
		 transition: background 0.3s;
 }
 .flickity-page-dots .dot.is-selected {
		 background: #ffffff;
 }
 /* ==============================================================
	Login Front 
	================================================================*/

.login-body {
		background-color: #2b2b2d;
}

.login-body .login-logo {
		margin: 0;
		text-align: center;
		background: #1b1b1d;
		color: #fff;
		font-size: 18px;
		text-transform: uppercase;
		display: inline-block;
		width: 100%;
		padding: 50px 0;
}

.form-login {
		/*max-width: 33%;*/
		margin: 50px auto 0;
		font-size: 1.3em;
}
@media only screen and (max-width:1000px){
	.form-login {
			width: 600px;
			max-width: 90%;
	}
}
@media only screen and (max-width:767px){
	.top-footer {
			text-align: center;
			padding: 5px 0 !important;
	}
	.top-footer > .row > * {
		padding: 5px;
	}
	.top-footer > .row > *:not(:last-child) {
		border-bottom: 1px solid #050505;
		padding-bottom: 10px;
	}
}

h2.form-heading {
		margin: 0;
		padding:30px 15px;
		text-align: center;
		background: #222224;
		color: #fff;
		font-size: 18px;
		text-transform: uppercase;
		display: inline-block;
		width: 100%;
}

.form-login .checkbox {
	 margin-bottom: 14px;
}

.radios {
	 display: inline-block;
	 margin-bottom: 15px;
	 width: 100%;
}

.radios .col-sm-6, .radios .col-lg-6 {
	 padding-left: 0;
}

.form-login .checkbox, .radios label {
	 font-weight: normal;
	 color: #565658;
}


.form-login .checkbox input[type="checkbox"],
.radios input[type="radio"]{
	 margin-right: 5px;
}

.form-login .form-control {
	 position: relative;
	 font-size: 16px;
	 height: auto;
	 padding: 10px;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
}

.form-login .form-control:focus {
	 z-index: 2;
}

.form-login input[type="text"], .form-login input[type="password"] {
	 margin-bottom: 15px;
	 /*border-radius: 4px;*/
	 border-radius: 0;
	 border: 2px solid #2980BB;
	 background: #ffffff;
	 box-shadow: none;
	 font-size: 13px;
	 color: #777777;
	 padding: 12px;
}
.form-login .btn-primary-login{
		background: #2980BB;
		border-radius: 0;
		border: 0;
		transition: all .2s ease-in-out;
}
.form-login .btn-primary-login:hover{
		background: #4ea8e5;
}

.form-login p {
	 /*text-align: center;*/
	 color: #b6b6b6;
	 font-size: 14px;
}

.modal-body p {
	 color: #333;
}

.form-login a, .registration, .login-body label  {
	 color: #2980BB;
}

.registration a {
	 color: #fff;
}


.form-login a:hover {
	 color: #2980BB;
}


.login-social-link  {
	 display: inline-block;
	 margin-top: 20px;
	 margin-bottom: 15px;
	 width: 100%;
}

.login-social-link a {
	 color: #fff;
	 padding: 10px 38px;
	 border-radius: 2px;
	 width: 46.5%;
	 text-align: center;
}

.login-social-link a:hover {
	 color: #fff;
}

.login-social-link a i {
	 font-size: 20px;
	 padding-right: 10px;
}

.login-social-link a.facebook {
	 background: #3b5999;
	 margin-right: 22px;
	 float:left;
}

.login-social-link a.facebook:hover {
	 background: #344f87;
}

.login-social-link a.twitter {
	 background: #63c6ff;
	 float:left;
}

.login-social-link a.twitter:hover {
	 background: #4c98c4;
}

.modal-body input[type="text"] {
	 background: #fff;
	 border: 1px solid #ddd;
	 color: #333;
}
/* ===================================================
		card accordion
======================================================*/
#bphn-faq .panel{
	border-radius: 0;
	background: none;
	background-color: #12679e;
}
.card {
	position: relative;
	margin-bottom: 24px;
	/*background-color: #000;*/
	/*color: #313534;*/
	color: #ffffff;
	background-color: #12679e;
	border-radius: 0;
	/*-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
	-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
	-o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);*/
}
.card:before,
.card:after {
	content: " ";
	display: table;
}
.card:after {
	clear: both;
}
.card .btn-icon-toggle:hover,
.card .btn-flat:hover {
	background-color: rgba(12, 12, 12, 0.07);
}
.card > .nano:last-child {
	border-radius: 0 0 2px 2px;
}
.card.no-shadow {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.card-head {
	position: relative;
	/*line-height: 52px;*/
	/*min-height: 56px;*/
	vertical-align: middle;
	border-radius: 2px 2px 0 0;
	cursor: pointer;
}
.card-head:before,
.card-head:after {
	content: " ";
	display: table;
}
.card-head:after {
	clear: both;
}
.card-head header {
	/*display: inline-block;*/
	padding: 11px 16px 11px 24px;
	vertical-align: middle;
	line-height: 24px;
	font-size: 18px;
	white-space: normal;
}
.card-head header > h1,
.card-head header > h2,
.card-head header > h3,
.card-head header > h4,
.card-head header > h5,
.card-head header > h6 {
	vertical-align: middle;
	margin: 0;
	line-height: 1;
}
.card-head header small {
	color: inherit;
	opacity: 0.6;
	font-size: 75%;
}
.card-head > div {
	display: inline-block;
}
.card-head .tools {
	/* padding-right: 16px; */
	float: right;
}
.card-head .tools form {
	margin-top: 7px;
	margin-bottom: 7px;
	margin-left: 24px;
	line-height: normal;
	vertical-align: middle;
}
.card-head .tools .btn-floating-action {
	margin-left: 8px;
}
.card-head .tools > .btn-group {
	margin-right: 4px;
}
.card-head .tools > .btn-group-xs {
	margin-right: 10px;
}
.card-head .tools > .btn-group-sm {
	margin-right: 4px;
}
.card-head .tools > .btn-group-lg {
	margin-right: 0;
}
.card-head .tools.pull-left > .btn-group {
	margin-left: 4px;
}
.card-head .tools.pull-left > .btn-group-xs {
	margin-left: 10px;
}
.card-head .tools.pull-left > .btn-group-sm {
	margin-left: 4px;
}
.card-head .tools.pull-left > .btn-group-lg {
	margin-left: 0;
}
.card-head.card-head-xs {
	line-height: 32px;
	min-height: 36px;
}
.card-head.card-head-xs header {
	font-size: 15px;
	padding: 8px 24px;
}
.card-head.card-head-sm {
	line-height: 44px;
	min-height: 48px;
}
.card-head.card-head-sm header {
	font-size: 15px;
}
.card-head.card-head-lg {
	line-height: 76px;
	min-height: 80px;
}
.card-head.card-head-lg header {
	font-size: 24px;
}
.card-body {
	padding: 0 24px 10px;
	position: relative;
	color: #000;
	/*font-style: italic;*/
	font-size: 14px;
	white-space: normal;
}
.card-body p{
}
.card-body:before,
.card-body:after {
	content: " ";
	display: table;
}
.card-body:after {
	clear: both;
}
.card-body:last-child {
	border-radius: 0 0 2px 2px;
}
.card-body.table-responsive {
	margin: 0;
}
.card-actionbar {
	padding-bottom: 8px;
	position: relative;
}
.card-actionbar:before,
.card-actionbar:after {
	content: " ";
	display: table;
}
.card-actionbar:after {
	clear: both;
}
.card-actionbar:last-child {
	border-radius: 0 0 2px 2px;
}
.card-actionbar-row {
	padding: 6px 16px;
	text-align: right;
}
.card-tiles > .row,
.card-type-blog-masonry > .row {
	margin: 0;
}
.card-tiles > .row > [class^="col-"],
.card-type-blog-masonry > .row > [class^="col-"] {
	padding: 0;
}
.card-underline .card-head {
	border-bottom: 1px solid rgba(150, 156, 156, 0.4);
}
.card-underline .card-foot {
	border-top: 1px solid rgba(150, 156, 156, 0.4);
}
.card-bordered,
.card-outlined {
	border: 2px solid #969c9c;
}
/* ==================================================
 Footer
 ====================================================*/
.footer {
	color: #fff;
	display: table-row;
	background: #161616;
	display: inline-block;
	width: 100%;
	font-size: 13px;
	z-index: -1;
	font-weight: 300;
	float: left;
}
.footer a:hover {
color: #ff0;
}
.top-footer{
	padding: 25px 0;
	position: relative;
}
.bot-footer{
	/*height: 30px;*/
	line-height: 30px;
	margin-top: 5px;
	border-top: 1px solid #050505;
}
.top-footer p {
margin-bottom: 0 !important;
}
.footer h1 {
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 20px;
	/*font-family: 'Fjalla One', sans-serif;*/
}
.footer address a {
	color: #f37c6b;
}
.footer .col-social .nav li{
	display: inline-block;
}
.footer .col-social .nav li a{
	font-size: 2em;
	padding: 5px;
	color: #ffffff;
	transition: all .2s ease-in-out;
}
.footer .col-social .nav li:hover a{
	background: none !important;
	color: #2980BB;
	-webkit-animation : shake .4s linear;
	-moz-animation : shake .4s linear;
	-o-animation : shake .4s linear;
	animation : shake .4s linear;
}
.footer .col-social .nav li a:hover, .footer .col-social .nav li a:focus{
	background-color: transparent !important;
}
.footer .col-social .nav li:active a, .footer .col-social .nav li:visited a{
	background: none;
	color: #000;
}
.footer h1{
	font-size: 16px;
	color: #2980BB;
	font-weight: 600;
	margin-bottom: 8px;
	margin-top: 10px;
}
/* ==================================================
Tabs Menu
=====================================================*/
/* Icons */
.icon::before {
		z-index: 10;
	display: inline-block;
	margin: 0 0.4em 0 0;
	vertical-align: middle;
	text-transform: none;
	font-weight: normal;
	font-variant: normal;
	font-size: 4em;
	line-height: 1;
	speak: none;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.tabs-bphn-menu {
    position: relative;
    /*overflow: hidden;*/
    margin: 0 auto;
    width: 100%;
    font-weight: 400;
    /*font-size: 1.25em;*/
}
.tabs-bphn-menu > nav {
	/*background: rgba(255,255,255,0.4);*/
	/*background: #2980BB;*/
	text-align: center;
}
.tabs-bphn-menu > nav > ul {
	/*position: relative;*/
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 0 auto;
	padding: 0;
	max-width: 1170px;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}
.tabs-bphn-menu > nav > ul > li {
	position: relative;
	/*z-index: 1;*/
	display: block;
	margin: 0;
	min-width: 200px;
	white-space: nowrap;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
	cursor: pointer;
    -webkit-transition: margin-bottom .5s;
    -moz-transition: margin-bottom .5s;
    transition: margin-bottom .5s;
}
/*.tabs-bphn-menu nav ul li a.icon{
	background-color: #dedede;
	width: 120px;
	height: 120px;
	border-radius: 50%;
}*/
.tabs-bphn-menu > nav > ul > li > a {
	padding: 2em 0;
	position: relative;
	display: block;
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
	/*white-space: nowrap;*/
	line-height: 2.5;
	color: #ffffff;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
.tabs-bphn-menu > nav > ul > li > a:before {
	border-radius: 100%;
	line-height: 100px;
	height: 100px;
	width: 100px;
	display: block;
	margin: auto !important;
	transition: background-color .5s;
	-moz-transition: background-color .5s;
	-webkit-transition: background-color .5s;
}
.tabs-bphn-menu > nav > ul > li > a:after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	content: '';
	z-index: 11;
	pointer-events: none;
	transition: all .3s;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
}
.tabs-bphn-menu > nav > ul > li > a:focus {
	outline: none;
}
.tabs-bphn-menu > nav > ul > li > a:hover{
	color: #000;
}
.tabs-bphn-menu > nav > ul > li > a > p {
	vertical-align: middle;
	white-space: nowrap;
	/*font-size: 0.75em;*/
	/*padding: 10px;*/
	font-size: 18px;
	margin: 0;
}
.tabs.tabs-bphn-menu > nav > ul > li > section {
    text-align: left;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #2980BB;
    -webkit-transition: height .5s;
    -moz-transition: height .5s;
    transition: height .5s;
}
.tabs-bphn-menu > nav > ul > li.tab-current {
	z-index: 10;
    margin-bottom: 300px;
}
.tabs-bphn-menu > nav > ul > li.tab-current > a {
	z-index: 1;
}
.tabs-bphn-menu > nav > ul > li.tab-current > a:before {
	background-color: #2980BB;
}
.tabs-bphn-menu > nav > ul > li.tab-current > a:after {
	border-width: 10px;
	border-top-color: #2980BB;
	margin-left: -10px;
}
.tabs.tabs-bphn-menu > nav > ul > li.tab-current > section {
    height: 300px;
}
/* Content */
.tabs-bphn-menu > nav > ul > li > section .container{
	height: 100%;
	/*overflow: hidden !important;*/
}
.tabs-bphn-menu > nav > ul > li > section p {
	margin: 0;
	text-align: left;
	/*padding: 0.75em 0;*/
	/*color: red;
	font-weight: 900;
	font-size: 4em;
	line-height: 1;*/
}
.tabs-bphn-menu > nav > ul > li > section .card-body p {
	margin: 0;
	text-align: left;
	font-size: 14px;
	white-space: pre-line;
	background: #12679E;
	padding: 10px;
	border-radius: 2px;
	/*padding: 0.75em 0;*/
	/*color: red;
	font-weight: 900;
	font-size: 4em;
	line-height: 1;*/
}
div[id^=ascrail][id$="-hr"] {
display: none !important;
}

.tombol-unduh-dokumen {
	position: absolute;
	background-color: rgba(0, 0, 0, .2);
	padding: 1em;
	color: #eee !important;
}
.tombol-unduh-dokumen:hover {
	background-color: rgba(0, 0, 0, .4);
	color: #fff !important;
}

ul, ol {
	padding-left: 20px !important;
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

#c7-ticker {
	background-color: #2980BB;
	color: white;
	padding: 0 0 0 42px;
	max-width: 100%;
	border-bottom: 1px solid #2980BB;
}
#c7-ticker:before {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 32px;
	width: 32px;
	text-align: center;
	background-color: #000;
	color: #fff;
}
#c7-ticker > ul {
	padding-left: 0 !important;
	list-style-type: none;
	height: 32px;
	margin-bottom: 0;
	overflow: hidden;
}
#c7-ticker > ul > li {
	height: 32px;
	line-height: 32px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: margin-top .5s;
}
#c7-ticker > ul > li > i.fa {
	background-color: #2980BB;
	float: right;
	display: inline-block;
	margin-left: 2px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
#c7-ticker > ul > li > b {
	margin-right: 10px;
	color: #ff0;
}
/* ==================================================
custom dialog box 
=====================================================*/
.dialog,
.dialog__overlay {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
}

.dialog {
		z-index: 2000;
		position: fixed;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		pointer-events: none;
}

.dialog__overlay {
		position: absolute;
		z-index: 200;
		background: rgba(55, 58, 71, 0.9);
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		transition: opacity 0.3s;
		-webkit-backface-visibility: hidden;
}
.dialog .dialog__header{
		border-bottom: 1px solid rgba(150, 156, 156, 0.4);
}

.dialog--open .dialog__overlay {
		opacity: 1;
		pointer-events: auto;
}

.dialog__content {
		/*width: 50%;*/
		width: 60%;
		/*min-width: 500px;*/
		background: #fff;
		max-height: 80%;
		overflow-y: scroll;
		/*margin: 30px auto;*/
		margin-top: 30px;
		margin-bottom: 30px;
		/*padding: 4em;*/
		/*text-align: center;*/
		position: relative;
		color: #333;
		z-index: 202;
		opacity: 0;
}
.dialog__content .dialog__content__title{
		position: relative;
		border-bottom: 1px solid rgba(221, 224, 224, 0.4);
		line-height: 30px;
		padding: 10px 20px;
		min-height: 30px;
		font-weight: 400;
		font-size: 20px;
		background-color: #2980BB;
		color: #fff;
		/*border-radius: 2px 2px 0 0;*/
}
.dialog__content .dialog__content__isi{
		padding: 20px;
		white-space: pre-line;
}
.dialog--open .dialog__content {
		pointer-events: auto;
}

@media only screen and (max-width:768px){
	.dialog__content {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			width: 80%;
			/*max-width: none;*/
			max-height: 80%;
			margin-top: 10px;
			margin-bottom: 10px;
			/*margin: 10px auto;*/
			-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
							box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
	}

}
/* Content */
.dialog h2 {
		margin: 0;
		font-weight: 400;
		font-size: 2em;
		padding: 0 0 2em;
		margin: 0;
}
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
		-webkit-animation-name: anim-open;
		animation-name: anim-open;
}

.dialog.dialog--close .dialog__content {
		-webkit-animation-name: anim-close;
		animation-name: anim-close;
}

.login-wrap {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.login-wrap .errorMessage {
	color: red;
	margin-top: -15px;
	margin-bottom: 20px;
}
.login-box {
	/*visibility: hidden;*/
	overflow: hidden;
	transition: height 1s;
	-moz-transition: height 1s;
	-webkit-transition: height 1s;
}
@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?n00rtp');
    src:    url('../fonts/icomoon.eot?n00rtp#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?n00rtp') format('truetype'),
        url('../fonts/icomoon.woff?n00rtp') format('woff'),
        url('../fonts/icomoon.svg?n00rtp#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-lifebuoy:before {
    content: "\61";
}
.icon-documentation:before {
    content: "\62";
}
.icon-megaphone:before {
    content: "\63";
}


@-webkit-keyframes anim-open {
		0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); }
		100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}

@keyframes anim-open {
		0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
		100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes anim-close {
		0% { opacity: 1; }
		100% { opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); }
}

@keyframes anim-close {
		0% { opacity: 1; }
		100% { opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1); }
}
/* ==================================================
 Animatios
 ====================================================*/
 @-webkit-keyframes spin{
		from{
				-webkit-transform: rotate(0deg);
		}
		to{
				-webkit-transform: rotate(360deg);
		}
}
@-moz-keyframes spin{
		from{
				-moz-transform: rotate(0deg);
		}
		to{
				-moz-transform: rotate(360deg);
		}
}
@-o-keyframes spin{
		from{
				-o-transform: rotate(0deg);
		}
		to{
				-o-transform: rotate(360deg);
		}
}
@keyframes spin{
		from{
				transform: rotate(0deg);
		}
		to{
				transform: rotate(360deg);
		}
}

/* shake */
@-webkit-keyframes shake{
		25%{
				-webkit-transform: translate(-10%);
		}
		50%{
				-webkit-transform: translate(10%);
		}
		75%{
				-webkit-transform: translate(-10%);
		}
		100%{
				-webkit-transform: translate(0);
		}
}
@-moz-keyframes shake{
		25%{
				-moz-transform: translate(-10%);
		}
		50%{
				-moz-transform: translate(10%);
		}
		75%{
				-moz-transform: translate(-10%);
		}
		100%{
				-moz-transform: translate(0);
		}
}
@-o-keyframes shake{
		25%{
				-o-transform: translate(-10%);
		}
		50%{
				-o-transform: translate(10%);
		}
		75%{
				-o-transform: translate(-10%);
		}
		100%{
				-o-transform: translate(0);
		}
}
@keyframes shake{
		25%{
				transform: translate(-10%);
		}
		50%{
				transform: translate(10%);
		}
		75%{
				transform: translate(-10%);
		}
		100%{
				transform: translate(0);
		}
}