.navbar-atas {
    background-color: #135891; biru tuo
    border-color: #227ac2; biru enom
    border-radius: 0;
}

.navbar-atas .navbar-brand,
.navbar-atas .navbar-brand:hover,
.navbar-atas .navbar-brand:focus {
    color: #FFF;
}

.navbar-atas .navbar-nav > li > a {
    color: #FFF;
}

.navbar-atas .navbar-nav > li > a:hover,
.navbar-atas .navbar-nav > li > a:focus {
    background-color: #227ac2;
}

.navbar-atas .navbar-nav > .active > a,
.navbar-atas .navbar-nav > .active > a:hover,
.navbar-atas .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: #227ac2;
}

.navbar-atas .navbar-text {
    color: #FFF;
}

.navbar-atas .navbar-toggle {
    border-color: #227ac2;
}

.navbar-atas .navbar-toggle:hover,
.navbar-atas .navbar-toggle:focus {
    background-color: #227ac2;
}

.navbar-atas .navbar-toggle .icon-bar {
    background-color: #FFF;
}

/* Sub Menu */
.navbar-nav > li > .dropdown-menu {     background-color: #135891;  }

/* Dropdown menu font color*/ 

 .navbar-nav > li > .dropdown-menu a{   color: #fff;  }
 
 .navbar-atas .navbar-nav .dropdown-menu> li > a:hover,
 .navbar-atas .navbar-nav .dropdown-menu> li > a:focus {
    background-color: #227ac2;
}

.navbar-atas .navbar-nav .dropdown-menu> .active > a,
.navbar-atas .navbar-nav .dropdown-menu> .active > a:hover,
.navbar-atas .navbar-nav .dropdown-menu> .active > a:focus {
    color: #FFF;
    background-color: #227ac2;
}

@media (max-width: 767px) {
 
  .navbar-atas .navbar-nav .open .dropdown-menu > li > a {
 
    color: #227ac2;
 
  }
 
  .navbar-atas .navbar-nav .open .dropdown-menu > li > a:hover, 
  .navbar-atas .navbar-nav .open .dropdown-menu > li > a:focus {
 
    color: #227ac2;
 
  }
 
  .navbar-atas .navbar-nav .open .dropdown-menu > .active > a, 
  .navbar-atas .navbar-nav .open .dropdown-menu > .active > a:hover, 
  .navbar-atas .navbar-nav .open .dropdown-menu > .active > a:focus {
 
    color: #fff;
 
    background-color: #227ac2;
 
  }
 
}

.down_caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #ffffff;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";
}


/* link footer */
.text-color {
  color: #135891 !important;
}

/* sidebar card */
/* === card component ====== 
 * Variation of the panel component
 * version 2018.10.30
 * https://codepen.io/jstneg/pen/EVKYZj
 */
.card{ background-color: #fff; border: 1px solid transparent; border-radius: 6px; }
.kartu{ background-color: #fff; border: 2px solid #000; border-radius: 0px; }
.card > .card-link{ color: #333; }
.card > .card-link:hover{  text-decoration: none; }
.card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
.card .card-img{ position: relative; padding: 0; display: table; }
.card .card-img .card-caption{
  position: absolute;
  right: 0;
  bottom: 25px;
  left: 5px;
  color:red;
  font-style:bold;
}
.card .card-body{ display: table; width: 100%; padding: 12px; }
.card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
.card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; }
.card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
.card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
.card .card-body h1:first-child,
.card .card-body h2:first-child,
.card .card-body h3:first-child, 
.card .card-body h4:first-child,
.card .card-body .h1,
.card .card-body .h2,
.card .card-body .h3, 
.card .card-body .h4{ margin-top: 0; }
.card .card-body .heading{ display: block;  }
.card .card-body .heading:last-child{ margin-bottom: 0; }

.card .card-body .lead{ text-align: center; }

@media (max-width: 1200px) {
clear: both;
}

@media( min-width: 768px ){
  .card .card-left{ float: left; padding: 0 8px 0 0; }
  .card .card-right{ float: left; padding: 0 0 0 8px; }
    
  .card .card-4-8 .card-left{ width: 33.33333333%; }
  .card .card-4-8 .card-right{ width: 66.66666667%; }

  .card .card-5-7 .card-left{ width: 41.66666667%; }
  .card .card-5-7 .card-right{ width: 58.33333333%; }
  
  .card .card-6-6 .card-left{ width: 50%; }
  .card .card-6-6 .card-right{ width: 50%; }
  
  .card .card-7-5 .card-left{ width: 58.33333333%; }
  .card .card-7-5 .card-right{ width: 41.66666667%; }
  
  .card .card-8-4 .card-left{ width: 66.66666667%; }
  .card .card-8-4 .card-right{ width: 33.33333333%; }
}

/* -- default theme ------ */
.card-default{ 
  border-color: #ddd;
  background-color: #fff;
  margin-bottom: 24px;
}
.kart-default{ 
  border-color: #135891;
  background-color: #227ac2;  
}
.card-default > .card-header,
.card-default > .card-footer{ color: #333; background-color: #ddd; }
.card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-default > .card-body{  }
.card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-default > .card-left{ padding-right: 4px; }
.card-default > .card-right{ padding-left: 4px; }
.card-default p:last-child{ margin-bottom: 0; }
.card-default .card-caption { color: red; text-align: left; text-transform: lowercase; }


/* -- price theme ------ */
.card-price{ border-color: #999; background-color: #ededed; margin-bottom: 24px; }
.card-price > .card-heading,
.card-price > .card-footer{ color: #333; background-color: #fdfdfd; }
.card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-price > .card-img:first-child img{ border-radius: 0px 0px 0 0; }
.card-price > .card-left{ padding-right: 4px; }
.card-price > .card-right{ padding-left: 4px; }
.card-price .card-caption { color: red; text-align: left; }
.card-price p:last-child{ margin-bottom: 0; }

.card-price .price{ 
  text-align: center; 
  color: #337ab7; 
  font-size: 3em; 
  line-height: 0.7em; 
  margin: 24px 0 16px;
}
.card-price .price small{ font-size: 0.4em; color: #66a5da; }
.card-price .details{ list-style: none; margin-bottom: 24px; padding: 0 18px; }
.card-price .details li{ text-align: center; margin-bottom: 8px; }
.card-price .buy-now{ text-transform: lowwercase; }
.card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
.card-price table .note{ color: #666; font-size: 0.8em; }

/* Social IG */

.socialnet
{
  position: fixed;
  padding:10px 10px 3px 10px;
  top: 50px;
  right: 5px;
  background: rgba(0,0,0,0.0);
}

.socialnet:hover
{
  background: rgba(0,0,0,0.1);
}

/*
 * Callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */

/* Common styles for all types */
.bs-callout {
  margin: 20px 0;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
  background-color: #fff;
}

/* Variations */
.bs-callout-danger {
  background-color: #fcf2f2;
  border-color: #dFb5b4;
}
.bs-callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}
.bs-callout-info {
  background-color: #f0f7fd;
  border-color: #d0e3f0;
}