body{
	background-color:#f8fbfc;
	font-family:Roboto Condensed;
	font-weight:200;
	font-size:1.1rem;
	color:#777
}

h1, h2, h3, h4{color:#111; font-weight:700;}
/*pagination */
.pagination li .page-link{padding:5px 10px;}
.pagination{font-size:0.8rem}
.dataTables_info{font-size:0.7rem; margin-top:-10px;}
.dataTables_wrapper .row > div{margin-bottom:0px;}
.dataTables_length label{font-size:0.7rem;}



#myTable_filter label{font-size:0.7rem}

.mt-top{margin-top:120px}
.c-pri{color:#00aeef}
.c-pri-light{color:#42a5f5}
.c-pri-light2{color:#84c2f4}
.c-sec{color:#fdb118}
.c-white{color:#fff;}
.c-red{color:#e12931}
.c-red2{color:#eb5960}
.c-green{color:#42f471}
.c-b{color:#999}


.bg-pri{background:#00aeef}
.bg-sec{background:#fdb118}
.bg-pri-light{background:#42a5f5}
.bg-pri-light2{background:#84c2f4}
.bg-white{background:#fff}
.bg-black{background:#42a5f5}
.bg-red{background:#e12931}
.bg-blue{background:#32c5d2;}
.bg-input{background:#eaeaea}
.bold{font-weight:bold;}

.fs-icon{font-size:2.9rem;}
.fs-1{font-size:1.2rem}
.fs-0{font-size:0.9rem}
.fs-01{font-size:0.95rem}
.fs-2{font-size:1.3rem;}
.fs-xs{font-size:0.7rem}
.fs-zero{font-size:0px; color:white;}
.fs-icon-big{font-size:4rem}
.font-large-3 {font-size:3.6rem}
.font-large-2 {font-size:3.3rem}
.font-large-1 {font-size:2.4rem}
.row{margin:0px;}

a:hover{		    -webkit-transition:all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;	}

header .navbar{
border-bottom:1px solid #e6eff3;

padding:3px 15px 3px 5px;
}


#navbarCollapse{
	
}
header .form-control{border-radius:0; font-size:0.8rem; border:1px solid #eaeaea; }
header .form-control::placeholder{color:#CDCDCD}
header .btn{border-radius:0; padding:11px;font-size:0.8rem}
nav{background:#fff;
		    -webkit-transition:all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;	
}

nav .nav-item{margin-left:5px;}
nav .show{margin-top:15px;  margin-left:10px; margin-bottom:10px;}
nav .show .nav-item{margin:6px;
	-webkit-transition:all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;	
}
nav .nav-link{background:#00aeef; color:#fff !important; padding:7px 20px !important; margin-bottom:4px; font-weight:500; border-radius:2px;}
nav .nav-link:hover{background:#fdb118 !important; color:#fff !important;
	-webkit-transition:all 0.5s !important;
    -moz-transition: all 0.5s !important;
    transition: all 0.5s !important;	}
nav .btn-oke{cursor:pointer;background:#00aeef !important;}	
nav .btn-oke:hover{background:#fdb118 !important}
nav.shrink{
	background:#0d71b6;
	padding:0px 15px 1px 4px;
	-webkit-transition:all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;	
}
.navbar .input-group-addon{border-radius:0; padding:10px;}

.navbar.shrink {
	border-bottom:1px solid #fff;
	
}


.navbar #logo{
	height:80px; width:auto;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    transition: height 1s;	
	
	}
.navbar.shrink #logo{
	 height:70px;
	 background:#fff;
	 padding:5px;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    transition: height 1s;	
	
}

.navbar.shrink a{
	font-size:1rem;
	    -webkit-transition:font-size 1s;
    -moz-transition: font-size 1s;
    transition: font-size 1s;	
}

.navbar.shrink .input-group .form-control{
	padding:6px;
	-webkit-transition:padding 1s;
    -moz-transition: padding 1s;
    transition: padding 1s;	
}

.navbar.shrink .input-group-addon{padding:2px 8px;}
.navbar.shrink .btn-primary{
	font-size:0.8rem ;
	padding:12px 12px 11px 12px;
	background:#fdb118;
	    -webkit-transition:all 1s;
    -moz-transition: all 1s;
    transition: all 1s;	
}

.my-berkas{font-weight:500; color:#888; border-top-left-radius: 2px;}
.navbar.shrink .my-berkas{font-size:0.8rem;	    -webkit-transition:all 1s;
    -moz-transition: all 1s;
    transition: all 1s;	 }
	
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}


html,body{height:100%;}

.carousel{padding-top:80px; height:600px; overflow:hidden;}



#token{height:30%; }
#token > div{ padding:60px;}
#about .item{padding:20px 40px}
#about h2{font-size:1.8rem}
#about .team img{height:100px; width:auto;}
#about{padding:40px 60px; }
#who {padding:80px 60px; }
#who img{width:100%; height:auto;}
#who .desc{background-color:rgba(255, 255, 255, 0.1); color:#fff;padding:30px 40px;}
#who .full-desc{background-color:rgba(255, 255, 255, 0.1);color:#fff; padding:30px 40px;}
ol.lower-alpha{list-style-type: lower-alpha;}
#progress{padding:80px 0px; background:#fff; color:#fff; font-size:1rem}
#progress h3{margin-bottom:50px;}
#progress h4{font-size:1rem; }
#progress .arrow-right{position:absolute; margin-left:-3px; margin-top:110px }
#progress .arrow-left{position:absolute !important; right:-3px;margin-top:110px }
#progress .image{position:relative}
#proses-chart{padding-left:90px; padding-right:90px;  margin-bottom:40px; background:#fff}
#kerjasama{ padding:80px 200px;}
#kerjasama img{width:70%;height:auto}
#token .form-control{background:#cdcdcd;border:none;}

.bg-1{background:#32c5d2; }
.bg-2{background:#7a6a61;}
.c-1{color:#32c5d2; font-size:3rem;}
.c-2{color:#7a6a61; font-size:3rem;}
.btn{border:none;}
.btn:hover{background:#42a5f5}
.btn-primary{background:#32c5d2; color:#fff; font-size:0.9rem; text-transform: uppercase; border-radius:2px; padding:10px;}
.btn-sec{background:#fff; color:green; font-size:0.9rem; text-transform: uppercase; border-radius:2px; padding:10px;}
.btn-sec:hover{background:#32c5d2}
.btn-act{ border:0; padding:0; }
.btn-act:hover{background:#42a5f5; cursor:pointer}
.btn-act-rekom{border:0; padding:0; background:#32c5d2; margin:0; width:100%; cursor:pointer}
.btn-act-done{background:#5cb85c; cursor:pointer}
.input-group-addon{border:none;}

.parallax { 
    background-image: url("../../images/parallax1.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax1 { 
    background-image: url("../../images/parallax.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.footer{border-top:1px solid #eee; font-size:1rem }
.footer a{color:#fdb118; font-weight:500;}
.footer a:hover{color:#42f471; text-decoration:none;}

.card-img-top{width:100%; height:auto}

.panel {border-width: 0 0 1px 0;border-style: solid;border-color: #fff;background: none;box-shadow: none;}
.panel:last-child {border-bottom: none;}
.panel-group{margin-bottom:40px; border:1px solid #dddddd; border-radius:4px}
.panel-group > .panel:first-child .panel-heading {border-radius: 4px 4px 0 0;}
.panel-group .panel { border-radius: 0;}
.panel-group .panel + .panel {margin-top: 0;}
.panel-heading {background-color: #eee;border-radius: 0;border: none;color: #42a5f5;padding: 0;margin-bottom:-8px}
.panel-title a {display: block;color: #fdb118;padding: 15px;position: relative;font-size: 1rem;font-weight: 600;text-decoration:none;}
.panel-body {background: #fff;padding:18px; }
.panel:last-child .panel-body {border-radius: 0 0 4px 4px; font-size:1rem}
.panel:last-child .panel-heading {border-radius: 0 0 4px 4px;transition: border-radius 0.3s linear 0.2s;}
.panel:last-child .panel-heading.active {border-radius: 0;transition: border-radius linear 0s;}
.panel-heading a:before {content: '\f107';position: absolute;right: 20px;top: 10px;font-size: 24px;transition: all 0.5s;transform: scale(1);}
.panel-heading.active a:before {content: ' ';transition: all 0.5s;transform: scale(0);}
.panel .card-content{padding:0px 0;  }
.panel .card-content label{font-size:0.8rem; color:#999;}
.panel .card-content p{font-weight:500; margin-top:-8px; font-size:1rem}
#bs-collapse .panel-heading a:after {content: ' ';font-size: 24px;position: absolute;font-family: 'Material Icons';right: 5px;top: 10px;transform: scale(0);transition: all 0.5s;}
#bs-collapse .panel-heading.active a:after {content: '\f107';transform: scale(1);transition: all 0.5s;}
#accordion_side .panel-heading a:before {content: '\f106';font-size: 24px;position: absolute;font-family: 'FontAwesome';right: 15px;top: 10px;transform: rotate(180deg);transition: all 0.5s;}
#accordion_side .panel-heading.active a:before {transform: rotate(0deg);transition: all 0.5s;}


.timeline{margin-top:20px;}
.timeline > div{border-left:4px solid #84c2f4; margin-left:20px; padding: 20px; }
.timeline .icon{position:absolute;margin-left:-35px; font-size:30px; color:#2196f3}
.timeline .arrow{position:absolute; font-size:50px; color:#c4e5ff; margin-top:-10px;}
.timeline .timeline-content{margin-top:-10px; margin-left:17px; border:1px solid #c4e5ff; padding:10px; background:#fcfcfc}
.timeline .timeline-date{border-bottom:1px solid #fff; margin-bottom:20px;font-size:14px; padding-bottom:10px;}
.timeline .onProg{color:orange;}
.timeline .table{font-size:0.8rem}

.tab-info table tr td{border:1px solid #cdcdcd; padding:5px;}
.tab-info table tr th{border:1px solid #cdcdcd;padding:5px;}

.card-block img{width:100%;}
.prog-box .nav-tabs{border:none}
.prog-box .tab-content{padding:10px 35px 50px 35px; border:1px solid #ddd !important;border-top:none; background:#fff;}
.prog-box .nav-item .nav-link{background:#eaeaea; color:#888;}
.prog-box .nav-item .active{background:#fff; color:#000;  height:100%;}
.prog-box .nav-item a{font-size:1rem; font-weight:600;}

.nav-item .active{height:100%;}
.no-border{border:none;}

.icon-right-bottom{position:absolute;right:15px; top:15px; font-size:40px;}

.card-proses h4{font-size:1.1rem}

.team img{width:30%;}

#back-top{
	position:fixed;
	
	bottom:300px;
	right:10px;
	z-index:9999;
	opacity:0;
	  -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;	
}
#back-top i{font-size:40px; color:#ff952b}
#back-top.show{
	opacity:0.8;
		bottom:10px;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;	
}

.m-card{margin-top:15px; margin-bottom:15px;}
.modal-lg {
    max-width: 90%;
}

.footer{background:#0d71b6; color:#fff;}
.listing-image {
    display: inline-block;
	vertical-align:middle;
    position: relative;
    width: 100%;
	overflow:hidden;
	/* cursor:zoom-in; */
	border:1px solid #cdcdcd;
}
.listing-dummy {
    margin-top: 70%;
}
.listing-element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #eee;
	
	
}
.listing-image img{   
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	width:100%;
	}
.img-max{width:100%;height:auto;}	


@media screen and (min-width: 1920px) {
	.carousel{ height:700px;}
}
@media screen and (max-width: 1024px) {
	.navbar button{margin-top:10px;}
	.about {padding:5px;}
		#about, #who{padding:15px;}
	#about .item{padding:15px}
	#proses-chart{padding:20px 20px}
	#kerjasama{padding:30px;}
.btn-oke{ margin:0 !important;}	
}

@media screen and (max-width: 768px) {
	.carousel{padding-top:100px;}
	.carousel,.item,.active{height:40%;}
    .carousel-inner{height:100%;}
	#about, #who{padding:15px;}
	#about .item{padding:15px}
	#proses-chart{padding:20px 20px}
	#kerjasama{padding:30px;}

}
@media screen and (max-width: 600px) {
	
	.carousel{padding-top:100px;}
	.carousel,.item,.active{height:50%;}
    .carousel-inner{height:100%;}
	#about .about-andal{padding:60px;}
   	#about .item{border-bottom:1px solid #eee;}
	#kerjasama {padding:30px 100px}

	
}
@media (min-width: 576px){
	.container-fluid {
		padding-right: 0px;
		padding-left: 0px;
		margin-left:0; margin-right:0;
	}
}

@media screen and (max-width: 450px) {
	.carousel{padding-top:75px;}
	.carousel,.item,.active{height:33%;}
	.carousel-inner{height:100%;}
	#about .about-andal{padding:60px;}
	#who .desc{padding:15px; font-size:1rem}
	.navbar #logo{height:60px}
	.navbar.shrink #logo{
		 height:50px;	
	}
	.btn-oke{ margin:0 !important;}
	.mt-top{margin-top:100px}
	#dataTables_wrapper{padding:0px !important}
	.tab-content{padding:10px !important;}
}


@media screen and (max-width:360px){
	#proses-chart{padding:20px 20px}
	#kerjasama {padding:30px 10px}
}

@media screen and (max-width:320px){
	#proses-chart{padding:20px 20px}
	#kerjasama {padding:30px 10px}
}
.btn-contributor{color:#fdb118 !important; cursor:pointer}
.btn-contributor:hover{color:#42f471 !important}


.nav-pills .nav-link{background:#eee; border-radius:0;color:#999 }
.nav-pills .active{background:#fdb118 !important; }
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  padding: 5px;
  margin-top: 10px;
  color: white;
  font-weight: 500;
  text-align: center;
}

.loading {
	position: fixed;
	z-index: 999999;
	height: 2em;
	width: 2em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  }
  
  /* Transparent Overlay */
  .loading:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
	background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
  }
  
  /* :not(:required) hides these rules from IE9 and below */
  .loading:not(:required) {
	/* hide "loading..." text */
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
  }
  
  .loading:not(:required):after {
	content: '';
	display: block;
	font-size: 10px;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	-webkit-animation: spinner 150ms infinite linear;
	-moz-animation: spinner 150ms infinite linear;
	-ms-animation: spinner 150ms infinite linear;
	-o-animation: spinner 150ms infinite linear;
	animation: spinner 150ms infinite linear;
	border-radius: 0.5em;
	-webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  }

  @-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}