@media screen and (max-width:1155px){
  .box-utama{margin:0 15px;}
  .box-utama .left-utama{height:403px;}
  .box-utama .right-utama{ height:403px;}
  .card-utama.video .img-card{height:600px;}
  }
  
  @media screen and (max-width:1024px){
  .box-utama{margin:0 15px;}
  .box-utama .left-utama{height:360px;}
  .box-utama .right-utama{ height:360px;}
  .card-utama.video .img-card{height:530px;}
  
  }
  @media screen and (max-width:800px){
  body{background:#fff;}
  .cd-main-content {
    min-height: 100%;
    position: relative;
    background-color: #fff;
    z-index: 2;
    padding-top: 56px;
  }
  
  /*
  .cd-main-content.lateral-menu-is-open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  */
  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 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-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-menu-trigger .cd-menu-text {
    height: 100%;
    text-transform: uppercase;
    color: #444;
    font-weight: 600;
    display: none;
  }
  #cd-lateral-nav .cd-navigation li.search{margin:0; height:auto; position:relative; padding:15px; background:#444;}
  #cd-lateral-nav .cd-navigation li.search .search-mobile{padding:5px 46px 5px 10px; width:100%; height:40px; border:none; font-size:16px; border-radius:4px;}
  #cd-lateral-nav .cd-navigation li.search .btn-search{width:40px; height:40px; position:absolute;  top:15px; right:15px; text-align:center; background:transparent; color:#444; padding:0; border:none; display:flex; align-items:center; justify-content:center;}
  #cd-search {
      position: absolute;
      right:80px;
      top: 0;
      height: 100%;
      width:30px;
      display: flex;
      align-items: center;
      justify-content: center;
    padding:0 5px;
    color:#052962;
    font-size:19px;
  }
  #cd-notif {
      position: absolute;
      right:45px;
      top: 0;
      height: 100%;
      width:30px;
      display: flex;
      align-items: center;
      justify-content: center;
    padding:0 5px;
    color:#052962;
    font-size:19px;
  }
  #cd-notif .number{min-width:20px; height:20px; padding:0 3px; display:flex; align-items:center; justify-content:center; font-size:10px; background:#e74c4c; color:#fff; position:absolute; top:10px; right:-5px; border-radius:10px;}
  #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:#fff;
    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:#333;
    position:relative;
    font-weight:600;
    text-transform:normal;
    font-size:16px;
    border-bottom:1px solid #ddd;
  }
  
  #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:#333;}
  #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:#333;}
  #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;}
  ul.row-list.row4.list-small-card li{width:50%;}
  ul.row-list.row4.list-small-card li:first-child, ul.row-list.row4.list-small-card li:nth-child(2){margin-bottom:10px;}
  ul.row-list.row4.list-small-card li .card-box .text-card p.limited{display:none; padding:0; margin:0; height:0;}
  ul.row-list.row3.front-berita li{width:100%; padding:0 10px;}
  ul.row-list.row3.front-berita li:first-child, ul.row-list.row3.front-berita li:nth-child(2){margin-bottom:10px;}
  ul.row-list.front-video li{width:100%; margin-bottom:15px;}
  ul.row-list.front-pelatihan li{width:100%; margin-bottom:15px;}
  ul.row-list.front-video li:last-child{margin-bottom:0;}
  ul.row-list.front-pelatihan li:last-child{margin-bottom:0;}
  ul.row-list.front-belanja li{width:50%; margin-bottom:0;}
  ul.row-list.list-keuangan li{width:50%; margin-bottom:10px;}
  ul.row-list.list-keuangan li:last-child{margin-bottom:0;}
  .card-box.iconic{height:110px;}
  ul.row-list.front-belanja li:last-child{width:100%; margin-bottom:0; background:#e74c4c;}
  ul.row-list.front-belanja li:last-child .card-box.kategori .text-card{position:inherit; padding:30px 15px !important;}
  ul.row-list.front-komunitas li{width:50%; margin-bottom:15px;}
  ul.row-list.front-komunitas li:nth-child(5), ul.row-list.front-komunitas li:last-child{margin-bottom:0;}
  ul.row-list.list-kanal-pelatihan li .card-box .img-avatar{display:none;}
  .slider-item{border-left:none; border-right:none;}
  .cd-main-content.kanal-konsultasi{padding-top:56px !important; padding-bottom:56px !important;}
  .cd-main-content.kanal-konsultasi .all-box-chat{top:56px; bottom:56px;padding-left:15px;padding-right:15px;border: none;border-radius: 0;}
  .kanalname h2.titlecenter{font-size:24px; line-height:28px;}
  .barchat{height:56px; padding:10px 15px; border-top:1px solid #C1CDE1;}
  .barchat.video-chat{border-top:none;}
  .textarea-chat{height:36px;}
  .chatbox{width:100%; max-width:800px; margin:0 auto; height:56px; padding:0 46px; position:relative;}
  .chatbox .send-btn{width:36px; height:36px;}
  .chatbox .file-btn{width:36px; height:36px;}
  .chatbox .file-btn .upload{width:36px; height:36px;}
  .chatbox .file-btn .upload i{font-size:16px;color:#4e4e4e; line-height:normal;}
  .chatbox .file-btn input[type=file]{height:36px;width:36px;}
  .chatbox .file-btn .file-path-wrapper{width:36px;height:36px;}
  .chatbox .file-btn input.file-path {width:36px;height:36px;}
  .card-box.news.kanal{padding:0; border:none;}
  .card-box.news.kanal .text-card{padding:0 0 0 10px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;min-height:100px;}
  .card-box.news.kanal .img-card{width:100px; height:100px;border-radius:6px;}
  .card-box.news.kanal .img-card img{height:100px;}
  .card-box.news.kanal .text-card p.limited{display:none;}
  .card-box .text-card h2.title{font-size:18px; line-height:20px; font-weight:500;}
  ul.row-list.row3.kanal-video li{width:100%;}
  .card-box.big .img-card.video{height:auto;}
  ul.row-list.row3.kanal-video li .card-box .text-card p.limited{display:none;}
  /*kanal utama*/
  .box-utama .left-utama{width:100%; float:none; height:auto;}
  .box-utama .right-utama{width:100%; float:none; height:auto; display:block;}
  .card-utama .text-card{position:relative; width:100%; box-shadow:none; left:inherit; bottom:inherit; border-radius:0; padding:10px 0;}
  .card-utama .img-card{border-radius:6px;}
  .card-utama.small .img-card{border-radius:6px;}
  .card-utama.small .img-card{height:100px; width:100px;float: left;overflow: hidden;display: flex;align-items: center;justify-content: center;}
  .card-utama.small .img-card img{height:100px; width:auto;}
  .card-utama.small .text-card{padding: 0 0 0 10px;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;min-height: 100px; width:inherit;}
  .box-utama .left-utama .card-utama{margin-bottom:5px;}
  .box-utama .right-utama .card-utama.small:first-child{margin-bottom:15px;}
  .card-utama.video .img-card{height:auto;}
  /*artikel*/
  .detail-artikel .detail-in{padding:15px;}
  .box-title-detail {padding: 15px;}
  .box-title-detail h1.title{font-size:24px; line-height: 28px;}
  /*footer*/
  .footer .footer-in .footer-left{width:100%; float:none;}
  .footer .footer-in .footer-right{display:none;}
  .footer{width:100%; background:#f8f8f8;background-size:cover; padding:15px 0; overflow:hidden; min-height:auto;}
  .footer .footer-in{max-width:1200px; padding:0 15px; margin:0 auto;}
  .footer .footer-in .foot-logo{width:100%;float:none; display:flex; align-items:center; justify-content:center; margin:0 0 5px 0;}
  .footer .footer-in .foot-logo img{height:20px; width:auto; display:block;}
  .footer .footer-in .copy{height:auto; line-height:normal;float:none; text-align:center;}
  .footer .footer-in .footer-left .footer-apps{justify-content:center;}
  ul.sosmed {justify-content:center;}
  p.unduh{text-align:center;}
  .box-hl{width:100%; overflow:hidden; padding-right:0; position:relative;}
  .box-hl .top-right{width:100%; padding:0 15px 15px 15px; position:inherit; top:inherit; right:inherit; bottom:inherit; height:auto;z-index:3; overflow:hidden;}
  .box-hl .top-right .web-login{padding:15px; background:#333; border-radius:6px; position:inherit; top:inherit; bottom:inherit; right:inherit; left:inherit; display:none;}
  .box-hl .top-right .banner-box{padding:15px; border-radius:6px; position:inherit; top:inherit; bottom:inherit; right:inherit; left:inherit; min-height:230px;}
  .box-hl .bottom-right{width:100%; padding:0 15px 15px 15px; position:inherit; top:inherit; right:inherit; bottom:inherit; height:auto;z-index:3; overflow:hidden;}
  .box-hl .bottom-right .banner-box{padding:15px; border-radius:6px; position:inherit; top:inherit; bottom:inherit; right:inherit; left:inherit; min-height:230px;}
  
  .slider-media{padding-bottom:30px;}
  .kanalname h2.titlecenter{padding:15px;}
  ul.row-list.kanal-belanja li{width:100%;}
  .blockbox.komentar{padding:0 15px;}
  .blockbox .blockbox-head {height:auto;}
  .blockbox .blockbox-head h2.title{font-size:20px; line-height:24px;}
  .blockbox .blockbox-head a.btn-next{height:38px;}
  .container.video-detail{padding:0;}
  .detail-artikel .detail-in .detail90{width:100%; float:none; padding:0;}
  .detail-artikel .detail-in .detail10{width:100%; float:none; padding:15px 0;}
  .detail-artikel .detail-in .detail70{width:100%; float:none; padding:0;}
  .detail-artikel .detail-in .detail30{width:100%; float:none; padding:15px 0;}
  ul.share.share-detail{flex-direction:row; justify-content:center;}
  ul.share.share-detail li:first-child{display:none;}
  ul.share.share-detail li{margin:0 2px;width:40px;}
  ul.share.share-detail li a{ width:40px; height:40px;}
  .container.media{padding:0;}
  .box-head-toko .left-toko{width:70%; height:50px;}
  .box-head-toko .right-toko{width:30%;height:50px;display:flex; align-items:center; justify-content:flex-end; flex-direction:row;}
  ul.row-list.row4.pad5.terbaru-komunitas li{width:50%;}
  .slider-followed .slick-list{padding:0 10% 0 0;}
  .col20{width:100%; float:none;}
  .col80{width:100%; float:none;}
  .col70{width:100%; float:none;}
  .col30{width:100%; float:none;}
  ul.row-list.row3.pad5.anggota-komunitas li{width:50%;}
  ul.row-list.row2.pad5.anggota-komunitas li{width:100%;}
  .box-anggota {left:15px; right:15px;}
  .kartu-out{padding:0;}
  ul.row-list.row4.pad5.list-info-toko li{width:50%;}
  a.float-btn {width:auto; left:inherit; right:inherit; border-radius:4px; margin:0 20%; width:60%;}
  ul.row-list.list-display li{width:50%;}
  ul.row-list.list-edit li{width:100%;}
  ul.row-list.terbaru-komunitas li{width:100%;}
  .box-narasi .narasi-in{min-height:600px;}
  ul.row-list.list-result.kom li{width:50%;}
  ul.row-list.list-result li .card-box.big .img-card{height:auto; background:#f8f8f8; border-radius:6px;}
  ul.row-list.list-result li .card-box.big .img-card img{width:100%;height:auto; max-width:100%; max-height:100%;}
  .card-box.notif{padding:15px;}
  .tab-block{overflow-y:scroll;}
  ul.row-list.list-nk li{width:100%; margin-bottom:15px;}
  .box-soal ul.pilihan li{width:100%;}
  ul.row-list.pelatihan-anda li{width:100%;}
  .col-profile .col30{width:100%; float:none;}
  .col-profile .col55{width:100%; float:none;}
  .col-profile .col15{width:100%; float:none;}
  ul.row-list.list-level li{width:50%; margin-bottom:10px;}
  .box-poin .poin-anda{width:80%;}
  .col25.col-umkm{width:100%; float:none;}
  .col30.col-umkm{width:100%; float:none;}
  .col45.col-umkm{width:100%; float:none;}
  ul.row-list.list-moduls li{margin-bottom:15px;width:100%;}
  footer .power{text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column;}
  footer .power small{margin:5px 0;}
  .blockbox.small-badge{padding-top:15px;}
  .box-badge{height:90vh;bottom:5vh;top:5vh;}
  ul.row-list.list-badge-pop li{width:100%;}
  }
  @media screen and (max-width: 500px){
  .out-login {padding:15px;}
  .box-login{width:100%;}
  }
  @media screen and (max-width: 400px){
  .container.media {padding: 0 15px;}
  }