@media screen and (max-width:1024px) {
nav.menu{font-size:14px;}
.coverbox{height:447px;}
.coverbox .covertop .cover-in.homes{margin-top:170px;}
}
@media screen and (max-width:800px) {
.scroll_mobile{overflow-y:scroll;padding:15px 0;}
ul.row-list.list-small{display: flex;flex-flow: nowrap;flex-direction: row;width: 1200px;}
ul.row-list.list-small li{width:200px;}
header {
  position:fixed;
  top: 0;
  left: 0;
  right:0;
  height: 56px;
  width: 100%;
  background:#fff; background-size:cover;
  z-index:32;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  box-shadow:1px 1px 6px 1px rgba(0,0,0,0.05);
}
header.lateral-menu-is-open {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
header.is-fixed {position: fixed;}
#cd-logo {padding:8px 10px 8px 15px;height:56px;display:block;float:left;}
#cd-logo h1.title{float:left; font-size:24px; line-height:56px;}
#cd-logo img {display: block;height:40px;}
#cd-top-nav {position: absolute;top: 0;right: 120px;height: 100%;display: none;}
#cd-top-nav ul {height: 100%;padding-top: 18px;}
#cd-top-nav li {display: inline-block;margin-right: 1em;}
#cd-search {padding:8px 0;height:56px;display:flex; width:auto; position:absolute; right:79px; top:0; left:78px;}
#cd-back{width:56px; height:56px; display:flex; align-items:center; justify-content:center; float:left;}
#cd-top-nav a {
  display: inline-block;
  padding: .5em;
  color: #FFF;
  text-transform: uppercase;
  font-weight: 600;
}
#cd-top-nav a.current {
  background-color: #111;
}
.no-touch #cd-top-nav a:hover {
  color: rgba(255, 255, 255, 0.7);
}

#cd-menu-trigger {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width:auto;
  padding:0;
  padding-right:45px;
}
.cd-keranjang{position: absolute;
  right: 0;
  top: 0;
  height:56px;
  width:auto;
  padding:0 15px 0 0; display:flex; align-items:center; justify-content:center;}
.cd-keranjang  .number{position:absolute; top:20%; right:10%; min-width:20px; height:20px; border-radius:10px; background:#E40003; z-index:2; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff;}
.cd-notif{position: absolute;
  right:40px;
  top: 0;
  height:56px;
  width:auto;
  padding:0 10px; display:flex; align-items:center; justify-content:center;}
.cd-notif  .alert{position:absolute; top:20%; right:20%; width:10px; height:10px; border-radius:5px; background:#E40003; z-index:2; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff;}
.cd-share{position: absolute;
  right:73px;
  top: 0;
  height:56px;
  width:auto;
  padding:0 10px; display:flex; align-items:center; justify-content:center;}
#cd-menu-trigger .cd-menu-text {
  height: 100%;
  text-transform: uppercase;
  color: #444;
  font-weight: 600;
  display: none;
}
#cd-menu-trigger .cd-menu-icon {
  /* this span is the central line in the menu menu */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  background-color:#333;
  /* these are the upper and lower lines in the menu menu */
}
#cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: inherit;
  left: 0;
}
#cd-menu-trigger .cd-menu-icon::before {
  bottom:6px;
}
#cd-menu-trigger .cd-menu-icon::after {
  top:6px;
}
#cd-menu-trigger.is-clicked .cd-menu-icon {
  background-color: rgba(255, 255, 255, 0);
}
#cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after {
  background-color: #333;
}
#cd-menu-trigger.is-clicked .cd-menu-icon::before {
  bottom: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cd-menu-trigger.is-clicked .cd-menu-icon::after {
  top: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#cd-lateral-nav {
  position: fixed;
  height: 100%;
  right: 0;
  top:0;
  left:0;
  bottom:0;
  padding:56px 0 15px 0;
  visibility: hidden;
  /* the secondary navigation is covered by the main element */
  z-index:21;
  width:100%;
  background-color:#191919;
  overflow-y: auto;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
  transition: transform .4s 0s, visibility 0s .4s;
  /* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#cd-lateral-nav .cd-navigation {
  margin:0 0 30px 0;
  list-style:none; list-style-position:inside; padding:0;
}
#cd-lateral-nav .sub-menu {
  padding: 0;
  display: none;
  list-style:none; list-style-position:inside;
  border:none !important;
}
#cd-lateral-nav .sub-menu  li{
  padding:0;
}
#cd-lateral-nav li a {
  display: block;
  padding:15px;
  color:#fff;
  position:relative;
  font-weight:600;
  text-transform:normal;
  font-size:16px;
  border-bottom:1px solid #202020;
}

#cd-lateral-nav li a.selected {color:#e74c4c;}
.no-touch #cd-lateral-nav a:hover {
  background:#111;color:#999;
}
#cd-lateral-nav .sub-menu a, .sub-menu li:first-child{border:none !important;}
#cd-lateral-nav .sub-menu a, .sub-menu li{padding:15px 30px 15px 40px; color:#ccc;}
#cd-lateral-nav.lateral-menu-is-open {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
  transition: transform .4s 0s, visibility 0s 0s;
  /* smooth the scrolling on touch devices - webkit browsers */
  -webkit-overflow-scrolling: touch;
}

/* style menu items which have a submenu  */
#cd-lateral-nav .item-has-children > a {position: relative;/* this is the right arrow to show that the item has a submenu  */}
#cd-lateral-nav .item-has-children > a::after {
  content: '';
  display: block;
  height: 11px;
  width: 11px;
  position: absolute;
  top:40%;
  bottom: auto;
  right:20px;
  content:'\f107'; 
  font-family: 'FontAwesome';
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
	display: flex; align-items:center; justify-content: center;
}
#cd-lateral-nav .item-has-children > a.submenu-open{color:#ccc;}
#cd-lateral-nav .item-has-children > a.submenu-open::after {transform: rotate(-180deg);}

#cd-lateral-nav.lateral-menu-is-open {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
  transition: transform .4s 0s, visibility 0s 0s;
  /* smooth the scrolling on touch devices - webkit browsers */
  -webkit-overflow-scrolling: touch;
}
#cd-lateral-nav li a.btn-mobile {display: block;padding:10px 15px;color:#e7b652;position:relative;font-weight:600;text-transform:normal;font-size:16px;border:1px solid transparent;border-radius:6px;text-align:center;background:#fff;}
.hide_desktop {display: block;visibility: visible;}
.hide_mobile {display: none;visibility: hidden;height: 0}
/*detail*/
.cd-main-content {padding-top:56px; padding-bottom:56px;}
.cd-main-content.nopadbot{padding-bottom:0;}
.blockbox.wbg{margin:30px 0;}
.blockbox{margin:0 0 30px 0;}
ul.row-list.list-majalah li{width:50%; margin-bottom:10px !important;}
ul.row-list.list-majalah li .card-box.item .text-card{height:132px;}
.slider-five{padding:0; background:transparent;}
.slider-five .slider-items{padding:0;}
.slick-prev{left:10px;}.slick-next{right:10px;}
.slider-merc{ padding-left:40%;}
.slider-five .slick-list{padding:0 15% 0 0 !important;}
.slider-merc .merc-top{ width:40%; font-size:24px;line-height:25px;}
.slider-merc .merc-bottom{width:40%;font-size:20px;line-height:21px;}
ul.row-list.list-pohon li{width:50%; margin-bottom:10px !important;}
ul.row-list.list-pohon li .card-box.item .text-card{height:132px;}
.footer-col{flex-flow: wrap;}
.footer-in{padding:15px;}
.footer-in .boxbox{width:50%; padding:0 15px; margin-bottom:15px;}
.footer-in .boxbox.sosmed{width:100%;display: flex;flex-direction: column;justify-content: center;align-items: center; margin-bottom:0;}
.footer-in .boxbox.copyright{width:100%; margin-bottom:0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
ul.sosmed{justify-content:center;}
.logo-footer{display:none;}
.footer-in .boxbox.sosmed h4.title{margin-bottom:5px;}
.footer-menu-mobile{display:flex !important;}
a.sign-btn.hide_desktop{display:flex; visibility:visible; height:40px;}
.box-slider{padding:15px 0; height:auto;}
.slider-items.top{padding:0;}
.slider-main .slick-list{padding:0;}
.card-box.big{padding:10px 10px 30px 10px;}
.card-box.big .img-card{ margin:0 10px 0 0; width:50%;}
.card-box.big .img-card img{width:100%; height:auto;}
.card-box.big .img-card .terbaru{width:40px; height:40px; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0;}
.card-box.big .img-card .terbaru img{width:100%; height:auto;}
.card-box.big .text-card{padding:0; min-height:auto;height:210px;display: flex;justify-content: center;align-items: flex-start;flex-direction: column;}
.card-box.big .text-card h1.title{font-size:24px;line-height:25px;}
.card-box.big .text-card h2.title{font-size:20px;line-height:20px;}
/*box title kategori*/
.container.container-cat{margin-top:150px;}
.box-title-kategori{height:auto; width:100%; overflow:hidden; background:#83c03f; position:fixed; top:56px; }
.box-title-kategori .box-kategori-in{height:150px;}
.box-title-kategori .box-kategori-in h1.title{font-size:40px; line-height:40px;font-family: "BebasNeue-Regular", Arial; }
.box-title-kategori .box-kategori-in.majalah{background: url(../images/bg-majalah.png) top right no-repeat; background-size:contain;}
.box-title-kategori .box-kategori-in.merc{background: url(../images/bg-merc.png) top right no-repeat; background-size:contain;}
.box-title-kategori .box-kategori-in.pohon{background: url(../images/bg-pohon.png) top right no-repeat; background-size:contain;}
ul.pagging{justify-content:center;}
.box75.detail-produk{width:100%; float:none; padding:0 15px;}
.box65.detail-produk{width:100%; float:none;}
.box35.detail-produk{width:100%; float:none; margin-bottom:15px;}
.box25.detail-produk{width:100%; float:none; padding:0 15px;}
.box30.jumlah{width:100%; float:none;}
.box70.bentuk{width:100%; float:none; margin-bottom:10px;}
.box20.detail-cart{width:30%;padding:0 5px 0 15px;}
.box80.detail-cart{width:70%; padding:0 15px 0 5px}
.preview_detail .box30{width:100%; float:none; font-size:12px; font-weight:600;}
.preview_detail .box70{width:100%; float:none;}
.linebox.details{border:none; padding:0;}
.footer-in p{text-align:center;}
.detail-artikel.linebox{padding:0; border:none;}
.editedit{width:100% !important; float:none !important;}
.table-div .left-div{width:100%; float:none; padding:0;}
.table-div .right-div{width:100%; float:none; padding:0;}
.table-div .left-div.fixcol{width:30%; float:left; padding:0 15px 0 0;}
.table-div .right-div.fixcol{width:70%; float:left; padding:0 0 0 15px;}
span.title-profile {font-size: 80%;color: #bbb;}
.box40.histori-col{width:100%; float:none;}
.box40.histori-col-center{width:100%; float:none; margin-top:0; border-top:3px solid #ddd;}
.box20.histori-col{width:100%; float:none; margin-top:10px; border-top:3px solid #ddd;}
}
@media screen and (max-width:375px) {
.slider-merc .merc-top{ width:40%; font-size:18px;line-height:19px;}
.slider-merc .merc-bottom{width:40%;font-size:14px;line-height:15px;}

}