@charset "utf-8";
/* CSS Document */

.my-header {
	background-color: #C6F /*Change your desired color */
	color: #FFF; /*Optional: Change text color*/
}

.navbar-dark {
	color: ?; 
	background-color:#06F !important;
}

.carousel-caption {
	max-width: 100%;
    width:100%;
    background: rgba(0,0,0,0.5);
    left: 0;
}


.bg-grey {
	padding:.75rem 1.25rem;
	background-color:rgba(0,0,0,.03);
	border-top:1px solid rgba(0,0,0,.125);
}

.showPosts {
    cursor: pointer;
}

.showPosts > h5 {
    font-size: 15px;
    padding-left: 5px;
    margin-left:20px;
}

.dropdown-submenu{ position: relative; }
.dropdown-submenu>.dropdown-menu{
  top:0;
  left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#cccccc;
  margin-top:5px;margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
  border-left-color:#555;
}
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left>.dropdown-menu{
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.white-text{
   color:#FFF !important; 
}
/* color nav text

/*
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
}
@media (min-width: 1200px) { 
}
*/



.panel-borderless {
  border: 0;
  box-shadow: none;
}

/* hide up/down arrows ("spinners") on input fields marked type="number" */
.no-spinners {
  -moz-appearance:textfield;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* --------------- */

.carousel.slide img {
    width:100%;
    height:auto;
}

.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;
  box-shadow: none !important;
}

#image-gallery .modal-footer{
  display: block;
}

.thumb{
  margin-top: 15px;
  margin-bottom: 15px;
}


 /* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

#navbar-darkblue.navbar-default { /* #003399 - #0033cc */
    font-size: 14px;
    background-color: rgba(51, 51, 153, 1);
    background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    border: 0px;
	border-radius: 0;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover, 
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus, 
#navbar-darkblue.navbar-default .navbar-nav>.active>a,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:focus {  
	color: rgba(51, 51, 51, 1);
    background-color: rgba(25, 25, 25, 1);
    background: -webkit-linear-gradient(top, rgba(0,0,128,0.2) 0%, rgba(0,0,128,0.2) 100%);
    background: linear-gradient(to bottom, rgba0,0,128,0.2) 0%, rgba(0,0,128,0.2) 100%);
}
#sidebar-darkblue, #column-darkblue {
	background-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle {
    border-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle:hover,
#navbar-darkblue.navbar-default .navbar-toggle:focus {
    background-color: #3333cc;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a, 
#navbar-darkblue.navbar-default .navbar-brand {
    color: #999999; 
}
#navbar-darkblue.navbar-default .navbar-toggle .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff; 
}
.dropdown-menu {
     background-color: #3344ff !important;
     color:#ffffff !important;
}
@media (max-width:1024px){
    .navbar-header {
        width: 100%;
        text-align: center;
}
    .navbar-brand {
        display: block;
        float: none;
    }
}

@media (min-width: 1024px){
    .navbar-brand {
        display: none;
    }
}

th, td {
  padding: 5px;
  text-align: left;
}
.table-borderless td,
.table-borderless th {
    border: 0 ! ;
}
.tulisan_putih {
 color: #FFF;
}

.card {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid rgba(0,0,0,.125);
border-radius:.25rem
}
.card>hr {
	margin-right: 0;
	margin-left: 0
}
.card>.list-group:first-child .list-group-item:first-child {
border-top-left-radius:.25rem;
border-top-right-radius:.25rem
}
.card>.list-group:last-child .list-group-item:last-child {
border-bottom-right-radius:.25rem;
border-bottom-left-radius:.25rem
}
.card-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 1.25rem
}
.card-title {
margin-bottom:.75rem
}
.card-subtitle {
margin-top:-.375rem;
	margin-bottom: 0
}
.card-text:last-child {
	margin-bottom: 0
}
.card-link:hover {
	text-decoration: none
}
.card-link+.card-link {
	margin-left: 1.25rem
}
.card-header {
padding:.75rem 1.25rem;
	margin-bottom: 0;
	background-color: rgba(0,0,0,.03);
	border-bottom: 1px solid rgba(0,0,0,.125)
}
.card-header:first-child {
border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}
.card-header+.list-group .list-group-item:first-child {
	border-top: 0
}
.card-footer {
padding:.75rem 1.25rem;
	background-color: rgba(0,0,0,.03);
	border-top: 1px solid rgba(0,0,0,.125)
}
.card-footer:last-child {
border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)
}
.card-header-tabs {
margin-right:-.625rem;
margin-bottom:-.75rem;
margin-left:-.625rem;
	border-bottom: 0
}
.card-header-pills {
margin-right:-.625rem;
margin-left:-.625rem
}
.card-img-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.25rem
}
.card-img {
	width: 100%;
border-radius:calc(.25rem - 1px)
}
.card-img-top {
	width: 100%;
border-top-left-radius:calc(.25rem - 1px);
border-top-right-radius:calc(.25rem - 1px)
}
.card-img-bottom {
	width: 100%;
border-bottom-right-radius:calc(.25rem - 1px);
border-bottom-left-radius:calc(.25rem - 1px)
}
.card-deck {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column
}
.card-deck .card {
	margin-bottom: 15px
}
@media (min-width:576px) {
.card-deck {
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-right: -15px;
	margin-left: -15px
}
.card-deck .card {
	display: -ms-flexbox;
	display: flex;
	-ms-flex: 1 0 0%;
	flex: 1 0 0%;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 15px
}
}
.card-group {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column
}
.card-group>.card {
	margin-bottom: 15px
}
@media (min-width:576px) {
.card-group {
	-ms-flex-flow: row wrap;
	flex-flow: row wrap
}
.card-group>.card {
	-ms-flex: 1 0 0%;
	flex: 1 0 0%;
	margin-bottom: 0
}
.card-group>.card+.card {
	margin-left: 0;
	border-left: 0
}
.card-group>.card:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0
}
.card-group>.card:first-child .card-header, .card-group>.card:first-child .card-img-top {
	border-top-right-radius: 0
}
.card-group>.card:first-child .card-footer, .card-group>.card:first-child .card-img-bottom {
	border-bottom-right-radius: 0
}
.card-group>.card:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0
}
.card-group>.card:last-child .card-header, .card-group>.card:last-child .card-img-top {
	border-top-left-radius: 0
}
.card-group>.card:last-child .card-footer, .card-group>.card:last-child .card-img-bottom {
	border-bottom-left-radius: 0
}
.card-group>.card:only-child {
border-radius:.25rem
}
.card-group>.card:only-child .card-header, .card-group>.card:only-child .card-img-top {
border-top-left-radius:.25rem;
border-top-right-radius:.25rem
}
.card-group>.card:only-child .card-footer, .card-group>.card:only-child .card-img-bottom {
border-bottom-right-radius:.25rem;
border-bottom-left-radius:.25rem
}
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
	border-radius: 0
}
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer, .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header, .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top {
	border-radius: 0
}
}
.card-columns .card {
margin-bottom:.75rem
}
@media (min-width:576px) {
.card-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1
}
.card-columns .card {
	display: inline-block;
	width: 100%
}
}

.navbar a:hover {
  background-color: #00F !important;
}
