@media screen and (max-width:1154px){

}
@media screen and (max-width:1024px){

}
@media screen and (max-width:800px){
.hide_desktop{display:block; visibility:visible;}
.hide_mobile{display:none; visibility:hidden; height:0 !important;}
ul.right-menu li a{padding:10px;}
ul.list-4 li{width:50%;  margin-bottom:30px;}
ul.list-4 li:nth-child(2){padding-right:0;}
ul.list-4 li:nth-child(3){padding-left:0;}
ul.list-price li{width:100% !important;}
.header-in{padding-right:0;}
.card-single .left-single img{width:100%; height:auto; display:block;}
ul.list-3 li{width:100%; float:none; margin-bottom:30px;}
.header{position:fixed; top:0; z-index:99;}
.cd-main-content {
  /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
  min-height: 100%;
  position: relative;
  background-color: #f7f8f9;
  z-index: 2;
  padding-top: 50px;
  /* 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;
}
.cd-main-content.lateral-menu-is-open {
  /* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/
  -webkit-transform: translateX(-250px);
  -moz-transform: translateX(-250px);
  -ms-transform: translateX(-250px);
  -o-transform: translateX(-250px);
  transform: translateX(-250px);
}

header {
  position:fixed;
  top: 0;
  left: 0;
  height: 56px;
  width: 100%;
  background: #fff;
  z-index: 3;
  /* 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;
  border-bottom:1px solid #ddd;
}
header.lateral-menu-is-open {
  /* translate to show the lateral menu */
  -webkit-transform: translateX(-250px);
  -moz-transform: translateX(-250px);
  -ms-transform: translateX(-250px);
  -o-transform: translateX(-250px);
  transform: translateX(-250px);
}
header.is-fixed {
  position: fixed;
}

#cd-logo {
  padding:13px 8px;
  height:56px;
  display:block;
  float:left;
}
#cd-logo h1.title{float:left; font-size:24px; line-height:56px;}
#cd-logo img {
  display: block;
  height:30px;
}

#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-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: 56px;
  border-left:1px solid #ddd;
}
#cd-call {
  position: absolute;
  right:56px;
  top: 0;
  height: 100%;
  width: 56px;
  border-left:1px solid #ddd;
}
#cd-call .input-cal-mobile{height:56px;
    background:transparent;
    width:56px;
    position: absolute;
    z-index: 1;
    right:0; border:none;
    top:0; opacity:0;}
.input-cal-mobile .dates2{height:56px;
    background:transparent;
    width:56px;
    position: absolute;
    z-index: 1;
    right:0; border:none;
    top:0; opacity:0;}
#cd-menu-trigger .cd-menu-text {
  height: 100%;
  text-transform: uppercase;
  color: #FFF;
  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: #555;
  /* 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: #e02518;
}
#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;
  visibility: hidden;
  /* the secondary navigation is covered by the main element */
  z-index: 1;
  width: 250px;
  background-color: #f8f8f8;
  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: translateX(80px);
  -moz-transform: translateX(80px);
  -ms-transform: translateX(80px);
  -o-transform: translateX(80px);
  transform: translateX(80px);
}
#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 a {
  display: block;
  line-height: 2em;
  padding:8px 16px 8px 16px;
  color: #555;
  position:relative;
}
#cd-lateral-nav a .qty_pembelian{position:absolute; top:12px; right:15px; height:19px; border-radius:2px; min-width:19px; padding:3px; font-size:12px; text-align:center; z-index:2; background:#e73131; color:#fff; line-height:14px; font-weight:700;}
#cd-lateral-nav a.current {background-color:#ddd;color: #3463af;}
.no-touch #cd-lateral-nav a:hover {
  color: #FFF;
}
#cd-lateral-nav .sub-menu a, .sub-menu li:first-child{border:none !important;}
#cd-lateral-nav .sub-menu a, .sub-menu li{padding:2px 16px;}
#cd-lateral-nav.lateral-menu-is-open {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(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: 8px;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 1em;
  background: url("../images/cd-arrow.svg") no-repeat center center;
  background-size: 8px 11px;
  -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;
}
#cd-lateral-nav .item-has-children > a.submenu-open::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}
#cd-lateral-nav .cd-navigation li.search{margin:0; height:56px; position:relative; padding:8px; background:#659ecb;}
#cd-lateral-nav .cd-navigation li.search .search-mobile{padding:5px 46px 5px 10px; width:100%; height:42px; border:1px solid #ddd; font-size:16px;}
#cd-lateral-nav .cd-navigation li.search .btn-search{width:42px; height:42px; position:absolute; padding:8px 0; top:8px; right:8px; text-align:center;}
#cd-lateral-nav .cd-navigation li a.btn-login{height:56px; width:100%; padding:0; text-align:center; background:#bacfe6; color:#555; line-height:56px; font-size:16px;}
.box-register .left-register.data{padding:15px;} 
.box-register .right-register.data{padding:15px;}
#bank-lain ul li .no, #bank-bni ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
#bank-lain ul li .kiri, #bank-bni ul li .kiri{padding:10px; width:35%; float:left; text-align:center;}
#bank-lain ul li .kanan, #bank-bni ul li .kanan{padding:10px 10px 10px 0; width:58%; float:left;}
ul.interest li{width:48%; margin:1%; float:left; position:relative;}
.inter-check {height:90px;}
	.inter-check input[type="checkbox"]{height:90px;}
	ul.interest li .box-interest{height:90px;}
}
@media screen and (max-width:680px){
.box-register .left-register.login {display:none; visibility:hidden;}
.box-register .right-register{width:100%; float:none; padding:8px;}
.box-register .left-register.login, .box-register .right-register.login{height:auto !important; min-height:100vh; }
.box-register{display:flex; align-items:center; justify-content:center;}
.box-register .left-register:after, .box-register .left-register:before{display:none; visibility:hidden;}
.box-register .left-register.data, .box-register .right-register.data{min-height:10px; width:50% !important; padding:15px;}
.box-register.data{align-items:flex-start; justify-content:flex-start;}
.cover-up .cover-majalah{position:absolute; right:0; top:50px; width:55%;}
.cover-up .cover-koran{position:absolute; left:0; top:70px; width:55%;}
.cover-up .cover-tebi{width:55%;}
}
@media screen and (max-width:600px){
.card-single .right-single{width:100%; float:none; padding:15px; min-height:100px;}
.card-single .left-single{width:100%; float:none; padding:15px; min-height:100px;}
.box-newsletter a.btn-newsletter{padding:15px;}
.box-register{flex-direction:column;}
.box-register .right-register{width:100%; float:none; order:1; padding:15px;}
.box-register .left-register{width:100%; float:none; order:2; height:auto; margin-bottom:45px; padding:15px;}
.box-register .left-register.data{width:100% !important; float:none; order:1;} 
.box-register .right-register.data{width:100% !important; float:none; order:2;}
.header-checkout {height:auto;}
.header-checkout .left-head, .header-checkout .right-head{width:100%;float:none;}
.header-checkout .right-head{position:relative; text-align:center;}
.box-checkout .right-box-checkout{width:100%; float:none; min-height:200px;}
.box-checkout .left-box-checkout{width:100%; float:none; min-height:200px;}
.box-profil .left-profil{width:100%; float:none; min-height:20px;}
.box-profil .right-profil{width:100%; float:none; min-height:20px;}
.box-profil:before{display:none;}
.infobox{margin-top:0;}
h1.thanks{font-size:30px; line-height:34px;}
.cover-up{height:300px;}

}
@media screen and (max-width:450px){
	ul.list-4 li{width:100%; float:none; padding:0;}
	ul.list-price li{margin-bottom:0 !important;}
	.card-item{height:auto; padding-bottom:60px;}
	h1.title-langganan, .card-item .card-item-head{font-size:24px; line-height:28px;}
	#bank-lain ul li .no, #bank-bni ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
	#bank-lain ul li .kiri, #bank-bni ul li .kiri{padding:10px; width:35%; float:left; text-align:center;}
	#bank-lain ul li .kanan, #bank-bni ul li .kanan{padding:10px 10px 10px 0; width:58%; float:left;}
	
}
@media screen and (max-width:350px){
ul.right-menu li a{padding:15px;}
}