/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */



@import url('https://fonts.googleapis.com/css?family=Roboto');

@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.6.3") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.6.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.6.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular") format("svg");
}

body {
    color: rgb(102, 102, 102);
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    word-wrap: break-word;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  width:100%;
}


/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}

.navbar-wrapper .navbar {
  margin:0;
  background: #314c72;
}


/* Headers logo */
.navbar-wrapper .logo{
  padding: 0 0 10px 15px;
}

.navbar-wrapper .logo img{
  width: 100%;
}
/* End Headers logo */

.navbar-wrapper .box-head-top{
  height: 35px;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd;
  margin:0 0 15px 0;
  font-size: 120%;

}

.navbar-wrapper .box-head-top .sl-header-text{
  padding-top:5px;
  padding-left: 0;
}

.navbar-wrapper .box-head-top .top-links-action{
  padding-right: 0;
  padding-top:5px;
  text-align: right;
  text-transform: uppercase;
}

.navbar-wrapper .box-head-top a{
  color:#666;
  text-decoration: none;
}

.navbar{
  margin-top: 15px;
}

 .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a:hover{
  background: #101c66;
}


.nav{
  color: #fff;
  font-size: 100%;
  font-weight: 700;
}

.navbar-inverse .navbar-nav > li > a {
  color: #fff;
  text-transform: uppercase;
}

/* search */

.search{
  display: table;
  padding:15px 10px 0 0 ;
}

.formsearch .input-group-addon{
  padding: 0;
  background: #fff;
  border: 0;
  width:30%;
}

.formsearch .selectserach{
  width:100%;
  background:#dedede66;
  border: none;
  font-size: 14px;

  padding: 6px 5px;
  border-left:1px solid #cdcdcd;
  border-top:1px solid  #cdcdcd;
  border-bottom: 1px solid  #cdcdcd;
}


.boxcat {
  background-color: #f9c300;
  color: #fff;
  padding: 0;
}

.boxcat .nav , .boxcat .nav li , .boxcat .nav ul {
  width: 100%;
}

.boxcat ul .catperent {
  padding-left: 52px;
  font-size: 125%;
  font-weight: bold;
  text-transform: uppercase;
}

.boxcat ul .catperent::before {
    width: 52px;
    height: 52px;
    content: "";
    display: inline-block;
    background-image: url(../images/group_btn.png);
    background-repeat: no-repeat;
    background-position: center -238px;
    left: 0px;
    top: -2px;
    position: absolute;
}

  .boxcat .dropdown-menu li a{
    padding:10px 0 10px 10px;
  }

  /*.boxcat .dropdown-menu li a::before {
    font-family: "FontAwesome";
    font-size: 6px;
    content: "\f009";
    color: #666;
    margin-right: 5px;
    top: -2px;
    position: relative;
} */
  .boxcat .dropdown-menu li .icon{
    font-size: 6px;
    color: #666;
    margin-right: 5px;
    top: -2px;
    position: relative;
  }
  .boxcat .dropdown-menu li:hover{
    background-color: #394673;
  }

  .boxcat .dropdown-menu li:hover a {
    color:#fff;
    font-weight: bold;
    background: none;
  }

  .boxcat .dropdown-menu li:hover a::before{
      color: #fff;
    }

  .boxcat .dropdown-menu{
    padding: 0;
  }
  .boxcat:hover ul.dropdown-menu{
      display: block;
  }

  .navmenu{
    padding:0;
  }

  /* shop cart */

.shopcart , .whasappheder{
  border-left :1px solid #6173b1;
  border-right:1px solid #6173b1;
  padding: 15px 5px 5px 5px;
  text-align: center;
}

.shopcart {
  border-left :0;
}

.shopcart .glyphicon {
  font-size: 200%;
  color:#fff;
  margin: 0 5px;
}

.whasappheder .fa{
  font-size: 200%;
  color: #fff;
  margin: 0 5px;
}

.shopcart a , .whasappheder a{
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  position: relative;
  top:-5px;
}

#hargabox{
  text-align: center;
  font-size: 150%;
  font-weight: bold;
}



  /*end show cart */

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.boxsliderhome{
  background: #f4f4f3;
}


/* Carousel base class */
.carousel {
  height: 438px;

}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 438px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */

.marketing h1 {
  color:#213184;
  text-align: center;
  font-weight: 400;
  margin-bottom: 30px;
  font-size: 350%;
}


.marketing .col-lg-3 {
  margin-bottom: 20px;
  text-align: center;
}

.marketing .col-lg-3 .fa{
  font-size: 75px;
  color:#f9c300;
}

.marketing h2 {
  font-weight: normal;
  color: #213184;
}
.marketing .col-lg-3 p {
  margin-right: 10px;
  margin-left: 10px;
}

.marketing img{
  max-width: 100%;
}

/* home produk */
  .boxprodukhome{
    width: 100% ;
    padding: 10px 0;
  }

  .boxprodukhome img , .produklist img{
    width: 252px;
    height: 252px;
  }

  .boxprodukhome p , .produklist p{
    margin:15px 0;
  }

  .boxprodukhome .caption , .produklist .caption{
    text-align: center;
  }

  .boxprodukhome .caption h3 , .produklist .caption h3 {
    height:55px;
    line-height: 24px
  }

  .boxprodukhome .caption a , .produklist .caption a{
    color: #666;
    text-decoration: none;
  }

  .boxprodukhome .caption a:hover , .produklist .caption a:hover {
    color: #428bca;
  }

  .boxprodukhome .harga , .produklist .harga {
    font-size: 15px;
    font-weight: 700;
    color:#394673;
  }

  .boxprodukhome .boxbtn .hiden , .produklist .boxbtn .hiden {
    display: none;
  }

  .boxprodukhome .boxbtn:hover .hiden , .produklist .boxbtn:hover .hiden   {
    display: inline;
  }

  .boxprodukhome .btn , .produklist .btn {
    background: orange ;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
  }

  .boxprodukhome .btn:hover , .produklist .btn:hover{
    background: #394673;
  }
/* end home produk */

/* Box home news */
.homenewsbox img{
  height: 189px !important;
}

.homenewsbox h3{
  height: 70px;
}
/* End box HOme news */

/* post page deteial news page */

.titlenews{
  font-weight: bold;
  padding-top: 0;
  margin-top: 0;
}

.post-tgl{
  text-align: right;
}

.post-img{
  width: 100%;
}

.post-img-src{
  font-size: 10px;
  text-align: right;
  font-style: italic;
}

.post-img-des{
  font-size: 10px;
  text-align: left;
  font-style: italic;
}

.content-container{
  font-size: 16px;
  color: #000;
}
.title-and-links h4{
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.title-and-links ul{
  padding: 0;
}

.title-and-links li{
  list-style: none;
  padding: 15px 0;
}

.title-and-links li a{
  color:#000;
  font-weight: bold;

  text-decoration: none;
}

/* end page */

.box-submit-home{
  padding: 15px 0;
}

.box-submit-home h2{
  font-size: 25px;
  color: #213184;
  line-height: 1.5;
  text-align: center
}

/* variasi class */

.bayangan{
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

.blockbox{
  background: #f4f4f3;
}

.featurette-divider {
  margin: 10px 0; /* Space out the Bootstrap <hr> more */
}

.padding {
  padding:10px 0;
}

.no-padding{
  padding: 0;
}

.color-def{
  background-color: #f9c300;
  color:#ffff;
}

.color-sec{
  background-color: #314c72;
  color:#ffff;
}

/* end variasi calls */

/* degail produk */

#box-content{
  min-height: 75vh;
}

#box-content img{
  margin:10px;
}

.breadcrumb {
    padding: 10px 0px;
    margin-left: 0;
    background: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 30px;
    background-color: #fff;
}

.breadcrumb li.active span {
    font-weight: bold;
    color: #394673;
}

.product_title{
  clear: none;
  margin-top: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
}

h2.quick-overview {
    font-weight: bold;
    font-size: 116.67%;
    margin-bottom: 7px;
    color: #444;
}

.checked {
  color: #ff9f1a;
}

.rating{
  margin:15px 0;
}

.slider-for{
	width: 100%;
	margin: 0 auto 1px;
	overflow: hidden;
}

.slider-for img , .slider-nav img {
	width: 100%;
	min-height: 100%;
  border-color: rgb(200, 200, 200);
  border-width: 1px;
  border-style: solid;
  margin: 0 !important;
}

.slider-nav img:hover{
  border-color: rgb(102, 102, 102);
}

.slider-nav{
	width: 100%;
	height: 300px;
	margin: auto;
}

.slider-nav .slick-track{
	height: 85px;
}


#produk_detail .boxslideimg{
  padding:0;
}


button.slick-prev::before {
    background: url('../images/arrow-up.png') no-repeat center center;
    width: 19px;
    height: 15px;
    opacity: 100;
    color: transparent;
}

button.slick-next::before {
    width: 19px;
    height: 15px;
    background: url('../images/arrow-down.png') no-repeat center center;
    opacity: 100;
    color: transparent;
}


.slider-nav button {
   left: 50%;
   margin-left: -14px;
   margin-top: 0;
   top: -5px;
   position: absolute;
   width: 25px;
   height: 25px;
   background: none;
   border-radius: 0;
   border: 0;
   font-size: 0;
   color: #999;

}

button.slick-next{
  position: relative;
  bottom: 10px;
}

.slick-list{
  padding: 15px 0 !important;
}

.box-harga{
  color: rgb(57, 70, 115);
  font-size: 170% !important;
  font-weight: bold;
  margin: 10px 0;
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid rgb(102, 102, 102);
}

.box-btn-produk .btn {
    background: orange;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
}

.box-btn-produk .btn:hover{
  background: #394673;
}

.box-btn-produk .putih{
  background: #fff;
  color: rgb(204, 204, 204) !important;
}

.box-btn-produk .putih:hover{
  background: orange;
  color: #fff !important;
}

.box-description ul.nav li{
  font-size: 16px;
  font-weight: 700;
}

.box-description ul.nav li a{
  color: #000;
  border:1px solid rgb(221, 221, 221);
}

.box-description ul.nav li.active a{
  background-color: rgb(57, 70, 115);
  color: #fff;
}

.box-description .tab-content{
  border:1px solid rgb(221, 221, 221);
  padding: 30px 20px ;
}
.box-reletet a{
  text-decoration: noen;
  color:rgb(57, 70, 115);
}

.box-reletet img{
  margin: 0 !important;
}

.box-reletet h5{
  font-size: 16px;
  font-weight: 700;
}

.box-variable-produk .row{
  margin: 10px 0;
}


/* footer */
.footerboxlink {
  padding:20px 0;
  border-top:1px solid #fff;
}

.footerboxlink h5{
  margin-top:0;
  font-weight: bold;
  color:#000;
}

.footerboxlink ul a {
  color:#6e6e6c;
}

.footerboxlink img{
  max-width: 100%;
}

.textcenter{
  text-align: center;
}

.footerboxlink .socialtitle{
  margin-top:10px;
  font-weight: 400;
}

footer{
  background: orange;
  color: #fff;
  padding: 15px 0;
}

/* End footer */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 768px) {

  .navbar-wrapper .logo img{
    width: 95%;
  }

  .carousel {
    height: auto;
  }

  .carousel .item {
    height: auto;
    min-height: 110px;
  }

  .carousel-inner > .item > img{
    height: auto;
  }

  .navbar .container{
    padding: 0;
  }

  .search{
    margin:0 0 20px 20px;
  }

  .boxcat .nav{
    margin-left: 0;
  }

  .boxcat ul .catperent::before {
    top:-6px;
  }

  .navbar-toggle {
    margin-right: 31px;
  }
}

@media (min-width: 768px) {
  /* Navbar positioning foo */

  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }



}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}