@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
/* Style the links inside the sidenav */
#showup a {
    position: absolute;
    bottom: 80px;
    transition: 0.3s;
    text-decoration: none;
}

#showup a:hover {
    top: 5px;
}
body {
	background: #ecf0f1;
	font-family: 'Muli', sans-serif;
}
.btn {
	font-size: 16px;
	font-weight: 700;
	padding: 8px 24px;
	line-height: 24px;
	letter-spacing: 0.5px;
	transition: .4s;
}
.btn-primary {
	background: #217693;
	border-color: #20718c;
}
.btn-default {
	background: #f2f2f2;
	border-color: #f0f0f0;
	color: #999;
}
.btn-big {
	display: block;
	width: 80%;
	height: 132px;
	margin: auto;
	border-radius: 0;
}
a {
	color: #217693;
	letter-spacing: 0.5px;
	font-weight: 700;
	font-size: 16px;
	transition: 0.3s;
}
a:hover {
	text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
	color: #217693; 
	letter-spacing: 0.25px;	
	font-weight: 700;
	font-family: 'Muli', sans-serif;
}
h1 {
	font-size: 40px;
	margin-bottom: 4px;
	line-height: 56px;
}
h2 {
	font-size: 32px;
	margin-bottom: 4px;
	line-height: 56px;
}
h3 {
	font-size: 24px;
	margin-bottom: 4px;
	line-height: 56px;
}
p {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #607D8B;
	line-height: 24px;
}
@media (max-width: 1024px) { 
	h1 {
		font-size: 32px;
	}
}
.navbar-static-top {
	position: absolute;
	left: 0; top: 0; right: 0;
	z-index: 99;
}
.navbar-top {
	min-height: 80px;
	background: #3b90ad;
}
.logo {
	position: relative;
	margin-top: 10px;
	margin-left: -4px;
	display: inline-block;
	width: 200px;
}
.logo img {
	display: block;
	width: 100%;
	height: auto;
}
.navbar-form  {
	margin-top: 18px;
}
.navbar-form .form-control {
	height: 44px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	padding-left: 16px;
	letter-spacing: 0.5px;
	display: inline-block;
	border:1px solid #fff;
	border-radius: 4px 0  0 4px;
	border-right: none;
	margin-right: -8px;
}
.navbar-form .form-control:focus {
	box-shadow: none;
}
.navbar-form .btn {
	background: transparent;
	color: #fff;
	border:1px solid #fff;
	height: 44px;
	border-radius: 0 4px  4px 0;
	border-left: none;
	padding-right: 16px;
}
.navbar-form .form-control::placeholder {
	color: #fff;
}
.navbar-bottom {
	height: 80px;
	background: #217693;
}
.navbar-nav>li:first-child a {
	padding-left: 0;
}
.navbar-nav>li>a {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 12px 32px;
	color: #fff;
	line-height: 64px;
}
.navbar-nav>li>a:hover,.navbar-nav>li.active>a {
	background: transparent;
	color:#ddd;
}
.navbar-nav>li>a:after,.navbar-nav>li.active>a:after {
	content: '';
    display: block;
    width: 0;
    margin-top: 2px;
    height: 3px;
    background: #2ecc71;
    transition: width .3s;
}
.navbar-nav>li.active>a::after {
	width: 100% !important;
}
.navbar-nav>li>a:hover::after {
	width: 100%;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
	background: transparent;
	border-color: transparent; 
}
.dropdown-menu {
	min-width: 240px;
	top: 110%;
}
.navbar-nav>li>.dropdown-menu {
	border-top-left-radius :4px;
	border-top-right-radius:4px;
}
.dropdown-menu>li>a {
	line-height: 40px;
	font-size: 14px;
	color: #217693;
	letter-spacing: 0.5px;
	font-weight: 700;
}
 .dropdown-menu::before {
    border-bottom: 9px solid rgba(0, 0, 0, 0.2);
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 40px;
    position: absolute;
    top: -8px;
}
  .dropdown-menu::after {
    border-bottom: 8px solid #FFFFFF;
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 40px;
    position: absolute;
    top: -7px;
  }
  .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  	background: #217693;
  }
 @media (max-width: 1024px) {
 	.navbar-nav>li>a {
 		font-size: 13px;
 		padding: 12px 24px;
 	}
 	.navbar-form .form-control {
 		font-size: 13px;
 	}
 }
 
 @media (max-width: 990px) {
 	.navbar-header {
        float: none;
        height: 80px;
    }
    .navbar-toggle {
        display: block;
        font-size: 24px;
        color: #fff;
        margin-top: 16px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        background: #fff;
        padding: 16px;
        padding-top: 0;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
    }
    .navbar-nav>li {
        float: none;
    }
    .collapse.in{
        display:block !important;
    }
    .navbar-collapse .navbar-nav>li>a {
    	color: #217693;
    	padding: 0 32px;
    }
    .navbar-collapse .dropdown-menu {
    	background: #f2f2f2;
    	border-top: 1px solid #e2e2e2;
    }
    .navbar-collapse .dropdown-menu>li>a {
    	line-height: 56px;
    	font-size: 13px;
    }
    .navbar-collapse .navbar-nav>li>a:first-child {
    	padding-left: 16px;
    }
    .navbar-collapse .navbar-nav>li>a::after {
    	display: none;
    }
 }
 @media (max-width: 767px) {
 	.navbar-form {
 		display: none !important;
 	}
 }
.container {
	padding: 0 16px;
}
.row {
	margin: 0 -16px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, 
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12,
.col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5,
.col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12,
.col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
	padding-left: 16px;
	padding-right: 16px;
}
#modal-lapkeu .modal-dialog {
	width: 960px;
}
#modal-lapkeu .modal-body {
	max-height: 70vh;
	overflow-y: hidden;
	padding: 0;
}
.full-section {
	position: relative;
	width: 100%;
	height: 100vh;
}
.section-500px {
	position: relative;
	height: 500px;
	width: 100%;
}
.page-header {
	background: #fff;
	border-bottom:1px solid #e2e2e2;
	margin: 0;
	padding:0;
}
.page-header .navbar-nav>li>a {
	color: #217693;
	font-size: 16px;
	font-weight: 700;
	line-height: 64px;
}
.page-header .navbar-nav>li>a::after {
	content: '';
    display: block;
    width: 0;
    margin-top: 1px;
    height: 3px;
    background: #2ecc71;
    transition: width .3s;
}
.page-header .navbar-nav>li>a:hover::after {
	width: 100%;
}
.filter {
	margin-bottom: 16px;	
}
.filter p {
	line-height: 56px;
}
.filter .nav>li>a {
	line-height: 32px;
}
.filter .nav>li>a:hover {
	border-color: transparent;
}
.filter .nav-tabs {
	border-bottom: none;
}
.filter .nav-tabs>li.active>a {
	border-radius: 0;
	background: transparent;
	border-color:transparent;
}
.filter .nav-tabs>li.active>a::after {
	content: '';
    display: block;
    width: 100%;
    margin-top: 10px;
    height: 3px;
    background: #2ecc71;
    transition: width .3s;
}
.page-header .dropdown a {
	display: inline-block;
	margin-left: 16px;
}
.page-header .dropdown a i {
	margin-left: 8px;
	font-size: 12px;
}
.page-header .dropdown-menu {
	right: 0;
	padding: 8px 0;
}
.page-header .dropdown-menu::before,
.page-header .dropdown-menu::after {
	left: auto;
	right: 40px;
}
.page-header .dropdown-menu>li>a {
	width: auto;
	display: block;
	margin-left: 0;
	line-height: 40px;
}
.pagination>li>a, .pagination>li>span {
	color: #217693;
	font-size: 12px;
	padding: 8px 16px;
	border:1px solid #eee;
}
.pagination>li.active a {
	background:#217693;
	color: #fff; 
}
#nav-layanan li a {
	line-height: 40px;
	padding: 12px 32px;
}
#nav-layanan li a i {
	position: absolute;
	right: 32px;
	top:24px;
}
#nav-layanan li a:hover i {
	right: 24px;
	transition: 0.5s;	
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
	background: #217693;
	border-radius: 0;
}
#inside-news .pagination {
	margin-bottom: 0;
}
#header {
	margin-top: 160px;
}
#header h3 {
	line-height: 64px;
	font-size: 18px;
	margin-bottom: 8px;
	margin-top: 8px;
}
#header .navbar-form {
	margin-top: 16px;
}
#header .navbar-form .form-control,
#header .navbar-form .btn {
	margin-top: 0;
	background: #f2f2f2 !important;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	color: #999;
	border: 1px solid #e2e2e2;
}
#header .navbar-form .form-control {
	border-right: 0;
}
#header .navbar-form .form-control::placeholder {
	color: #999;
}
#header .navbar-form .btn {
	border-left: 0;
	font-size: 13px;
}
#intro {
	background:url('../img/banner.jpg');
	background-position: top center;
	background-repeat: no-repeat;
}
#intro-page {
	background:url('../img/header-img.jpg');
	background-position: top center;
	background-repeat: no-repeat;
}
.intro-text {
	position: relative;
	margin-top: 22.5%;
	max-width: 50%;
}
@media (min-width: 1440px) {
	.intro-text {
		margin-top: 30%;
	}	
}
.intro-text h1 {
	color: #fff;
	line-height: 40px;
}
.intro-text p {
	color: #fff;
	font-size: 24px;
}
.intro-text hr {
	margin-left: 0;
	width: 64px;
	height: 2px;
	background: #2ecc71;
	border-color: #2ecc71;
}
.section-500px .intro-text {
	margin-top: 20%;
}
.page-content {
	position: relative;
	width: 100%;
	padding: 32px 0;
}

.banner-text {
	background: #fff;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	border: 1px solid #f2f2f2;
	margin-bottom: 20px;
	background:#3B90AD;
	padding:10px;
}

.banner-text h5{
	color:#FFFFFF;
	text-align:center;
}

.banner-text a{
	color:#FEBBD5;
}

.material-card {
	background: #fff;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 1px 1px 0px rgba(0, 0, 0, 0.05);
	border: 1px solid #f2f2f2;
	margin-bottom: 32px;
	padding: 0 32px;
}
.material-header {
	min-height: 64px;
	padding: 0 32px;
	margin: 0 -32px;
	background: #217693;
}
.material-header h3 {
	font-size:20px;
	margin: 0;
	line-height: 64px;
	color: #fff;
}
.material-header h3 i {
	position: absolute;
	top: 24px;
	right: 40px;
}
.material-content {
	padding: 32px 0;
}
.material-content .row,.material-content iframe {
	margin-top: -32px;
	margin-bottom: -32px;
}
.material-content .row {
	padding-right: 16px;
	padding-left: 16px;
}
.material-footer {
	padding: 32px 0;
	border-top: 1px solid #f2f2f2;
}



#news .material-footer {
	border-top: 0;
}
.x-col {
	display: inline-block;
	padding-top: 32px;
	padding-bottom: 32px;
}
.x-col a {
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #122748;
}
.x-col img {
	display: block;
}
.x-col p {
	margin-top: 16px;
}
.x-col i {
	font-size: 12px;
}
.x-col:hover {
	text-decoration: none;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	background: #fff;
}
.material-card .y-col {
	padding: 16px 0;
}
#inside-news a.y-col,#inside-activity a.y-col {
	margin-top: 16px !important;
}
.y-col {
	padding: 16px;
	background: #fff;
	display: block;
	position: relative;
	border-bottom: 1px solid #f2f2f2;
}
.y-col textarea {
	margin-bottom: 7px;
}
.y-col input {
	margin-bottom: 15px;
}
.y-col:hover,.col-galery-text:hover {
	text-decoration: none;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 5px 10px 0px rgba(0, 0, 0, 0.05);
}
.y-col-img {
	position: relative;
	max-height: 200px;
	overflow: hidden;
	display: block;
	padding: 0 16px !important;
}
.y-col-img img {
	margin: auto;
	width: 80%;
	height: auto;
}
#inside-news .y-col-img img {
	width: 100%;
}
.y-col-content h5 ,.col-galery-text h5 {
	margin-bottom: 16px;
	font-size: 18px;
}
.y-col-content fa {
border-radius: 50%;
background-color:#217693;
color:#FFFFFF;
}
.y-col-content p,.col-galery-text p {
	overflow: hidden;
    display: -webkit-box;
   /* -webkit-line-clamp: 3;*/
    -webkit-box-orient: vertical;
}
#inside-news .y-col-content p {
	/*-webkit-line-clamp: ;*/
	margin-bottom: 16px;
}
.y-col-content span,.col-galery-text span {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.75;
	line-height:12px;
}
.artikel-headline {
	padding: 16px;
	position: relative;
	display: block;
	width: 100%;
	background: #fff;
	border:1px solid #eee;
}
.artikel-headline:hover {
	text-decoration: none;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 5px 10px 0px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 5px 10px 0px rgba(0, 0, 0, 0.05);
}
.headline-img {
	max-height: 400px;
	overflow: hidden;
}
.headline-img img {
	display: block;
	width: 100%;
}
.headline-content {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: 3;
	background: rgba(0,0,0,.75);
	padding: 16px;
}
.headline-content h4, .headline-content p {
	color: #fff;
	margin-bottom: 16px;
}
.headline-content p {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.headline-content span {
	letter-spacing: 0.5px;
	font-weight: 700;
	font-size: 12px;
	color: #fff;
}
#inside-activity .container {
	width: 960px;
}
#news {
	margin-bottom: 0;
}
#twitter-jam {
	max-height: 560px;
	overflow-y: scroll;
	margin:0 -32px;
	padding-left: 32px;
	padding-right: 32px;
}
#twitter-jam::-webkit-scrollbar {
    width: 3px;
}
 
#twitter-jam::-webkit-scrollbar-track {
    background: #f2f2f2;
}
 
#twitter-jam::-webkit-scrollbar-thumb {
    background: #DDD;
}
.col-galery {
	background: #fff;
	padding:0;
	display: block;
	margin-bottom: 32px;
}
.col-galery-img {
	max-height: 200px;
	overflow: hidden;
}
.col-galery-text {
	padding: 32px;
}
.col-galery-text p {
	margin-top: 16px;
	margin-bottom: 16px;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	line-height: 56px;
	padding: 0 8px;
	border-color: #f2f2f2;
}
.table>tbody>tr>td {
	color: #999;
	padding: 0 16px;
	padding-left: 8px;
}
.table>tfoot>tr>td {
	padding: 0 16px;
	padding-left: 8px;
}
.table>thead>tr>th {
	color: #217693;
	font-weight: 700;
	padding: 0 16px;
	padding-left: 8px;
}
.table>thead>tr>th>span {
	margin-left: 8px;
}
.table>tfoot {
	background:#f2f2f2;
	color: #217693;
	font-weight: 700; 
}
footer.subfooter{
	position: relative;
	background: #FFFFFF;
	padding: 30px 0; 
	border-top: 1px solid #dcf0f1;
}
footer {
	position: relative;
	background: #217693;
	padding: 80px 0;
	min-width: 200px;
	border-top: 1px solid #dcf0f1;
}
footer .list-inline {
	margin-top: 4px;
}
footer .list-inline>li {
	padding:12px 16px;
}
footer .list-inline>li>a {
	font-size: 16px;
	color: #fff;
	letter-spacing: 0.5px;
	font-weight: 700;
}
footer .list-inline>li>a::after {
	content: '';
    display: block;
    width: 0;
    margin-top: 10px;
    height: 2px;
    background: #2ecc71;
    transition: width .3s;
}
footer .list-inline>li>a:hover::after {
	width: 100%;
    //transition: width .3s;
}
footer .list-inline>li>a:hover {
	text-decoration: none;
}
p.copy {
	font-size: 16px;
	color: #fff;
	letter-spacing: 0.5px;
	font-weight: 700;
	line-height: 24px;
	margin-top: 16px;
}
 
#mobile-menu {
	display: none !important; 
} 
 	
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.label{
	line-height:5;
}

@media (max-width: 1024px) { 
	p.copy {
		font-size: 13px;
	}
	footer .list-inline>li>a {
		font-size: 13px;
	}
	.intro-text {
		margin-top: 30%;
	}
	.intro-text h1 {
		font-size: 32px;
		line-height: 32px;
	}
	.intro-text p {
		font-size: 18px;
		line-height: 20px;
	}
	.material-card {
		padding: 0 24px;
	}
	.material-header {
		min-height: 40px;
	}
	.material-footer {
		padding: 16px 0;
	}
	h3 {
		font-size: 18px;
		line-height: 24px;
	}
	p,a,.btn {
		font-size: 13px;
	}
	p {
		line-height: 20px;
	}
	.btn {
		padding: 5px 16px;
	}
	#desktop-menu {
		display: none !important;
	}
	#mobile-menu {
		display: block !important;
		margin: 0 16px;
		line-height: 56px;
		border: 1px solid #e2e2e2;
		border-radius: 4px;
	}
	#mobile-menu a {
		text-align: center;
		font-size: 16px;
		display: block;
	}
	#mobile-menu a .caret {
		margin-left: 12px;
	}
}
@media (max-width: 1024px) {
	.material-header {
		margin: 0 -24px;
	}
	#desktop-menu {
		display: none !important;
	}
	#mobile-menu {
		display: block !important;
		margin: 0 16px;
		line-height: 56px;
		border: 1px solid #e2e2e2;
		border-radius: 4px;
	}
	#mobile-menu a {
		text-align: center;
		font-size: 16px;
		display: block;
	}
	#mobile-menu a .caret {
		margin-left: 12px;
	}
}
@media (max-width:990px) {
	#modal-lapkeu .modal-dialog {
		width: 96%;
	}
	#section-nav {
		padding: 16px 0;
	}
	.intro-text {
		margin-top: 40%;
	}
	.section-500px .intro-text {
		margin-top: 30%;
	}
	#about p {
		padding-left: 32px;
		padding-right: 32px;
	}
	#desktop-menu {
		display: none !important;
	}
	#mobile-menu {
		display: block !important;
		margin: 0 16px;
		line-height: 56px;
		border: 1px solid #e2e2e2;
		border-radius: 4px;
	}
	#mobile-menu a {
		text-align: center;
		font-size: 16px;
		display: block;
	}
	#mobile-menu a .caret {
		margin-left: 12px;
	}
	.sidebar-responsive {
		margin-top: 32px;
	}
	.y-col-img {
		margin-bottom: 24px;
	}
	.y-col-img img {
		width: 100%;
	}
	#service {
		text-align: center; 
	}
	#service .x-col {
		border-bottom: 1px solid #f2f2f2;
	}
	#service .x-col:last-child {
		border-bottom: 0;
	}
	#service .x-col img {
		margin: auto
	}
	footer {
		text-align: center;
	}
	footer .list-inline {
		display: block;
		margin: auto;
	}
	footer .pull-right {
		float: none !important;
	}
}
@media (max-width: 425px) {
	.navbar-header,.navbar-bottom {
		height: 64px;
	}
	.navbar-toggle {
		font-size: 16px;
	}
	#header {
		margin-top: 144px;
	}
	#header h3 {
		font-size: 14px;
	}
	.intro-text,.section-500px .intro-text {
		margin-top: 65%;
		max-width: 100%;
	}
	.intro-text h1 {
		font-size: 24px;
		line-height: 28px;
	}
	.intro-text p {
		font-size: 14px;
	}
	.material-header h3 {
		font-size: 16px;
		line-height: 56px;
	}
	.material-header h3 i {
		top: 12px;
	}
	#inside-activity {
		width: 100%;
		padding: 0;
	}
	#inside-activity .container {
		width: 100%;
	}
	.y-col {
		padding: 16px;
	}
	.y-col-img {
		padding: 0 16px;
	}
	.y-col-img .btn-big {
		width: 100%;
	}
	.y-col-content {
		padding: 0 16px;
		display: block;
		width: 100%;
	}
	.y-col-content h5, .col-galery-text h5 {
		font-size: 14px;
	}
	.x-col {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	footer {
		padding: 40px 0;
	}
	footer .list-inline {
		margin-top: 32px;
	}
	footer .list-inline>li {
		padding: 6px 16px;
	}
	#desktop-menu {
		display: none !important;
	}
	#mobile-menu {
		display: block !important;
		margin: 0 16px;
		line-height: 56px;
		border: 1px solid #e2e2e2;
		border-radius: 4px;
	}
	#mobile-menu a {
		text-align: center;
		font-size: 16px;
		display: block;
	}
	#mobile-menu a .caret {
		margin-left: 12px;
	}
}