@media screen and (max-width:1099px) {
    :root{
        --maxwidth: 768px;
        --center: 20px;    
    }

    header{
        grid-template-areas: 'burger logo ikon';
        grid-template-columns: 50px auto 100px;
    }
    .logo{
        grid-area: logo;
        place-content: center;
    }
    .togglemenu{
        grid-area: burger;
    }
    .iconarea{
        grid-area: ikon;
    }
    .togglemenu{
        display: block;
    }
    .togglemenu{
        display: block;
    }
    .naviku{
        position: absolute;
        background: var(--text-light);
        top: 100%;
        display: none;
        left: 0;
        right: 0;
        padding: 5px;
        flex-direction: column;
        margin: 0 auto;
    }
    .naviku li a{
        display: block;
        border-bottom: 1px solid #f5f5f5;
        padding: 5px 0 5px 9px;
        position: relative;
    }
    .naviku li a:hover{
        border-bottom: 1px solid #f5f5f5;
        top: 0;
        transition: none;
    }
    .naviku li a:before {
        content: '';
        width: 4px;
        height: 0;
        background-color: var(--color1);
        position: absolute;
        opacity: 0;
        left: 0;
        top: 10px;
        transition: all ease 0.31s;
    }
    .naviku li a:hover:before {
        opacity: 1;
        height: 10px;
    }
    
    .naviku > li{
        float: left;
        width: 100%;
        line-height: unset;
        height: auto;
    }
    .naviku > li .dropli{
        position: absolute;
        top: 10px;
        right: 10px;
        /* background: red; */
    }
    .naviku li > .dropli.active{
        top: 10px;
    }
    .naviku li ul{
        position: unset;
        width: 100%;
    }
    .naviku li ul li{
        padding: unset;
    }
    .naviku li ul li a{
        padding: 5px 0 5px 24px;
    }
    .naviku ul li a:before {
        left: 15px;
        top: 14px;
    }
    .naviku > li:has(ul) {
        padding-right: unset;
    }
    .naviku > li > ul{
        border-top: none;
    }
    .naviku li ul li ul{
        position: unset;
    }
    .naviku li ul li ul li a{
        padding: 5px 0 5px 44px;
    }
    .naviku ul ul li a:before {
        left: 35px;
        /* top: 14px; */
    }
    .naviku li ul li ul li ul a{
        padding: 5px 0 5px 64px;
    }
    .naviku ul ul ul li a:before {
        left: 55px;
        /* top: 16px; */
    }
    .naviku li ul li ul li ul li ul a{
        padding: 5px 0 5px 84px;
    }
    .naviku ul ul ul ul li a:before {
        left: 75px;
        /* top: 18px; */
    }

    .featpost{
        padding: 20px;
    }

    .container{
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .leftbar{
        padding: unset
    }

    .beritabaru .posting .kotakjudul h4 a{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .beritabaru .posting .kotakauth{
        display: -webkit-box;
    }

    .leftbar{
        width: 100%;
    }

    .rightbar{
        width: 100%;
    }

    .beritapop{
        display: block;
    }

    .beritapop p{
        display: block;
        margin-top: 0;
    }

    .postingpop .posting_gbrpop{
        margin-right: 20px;
        margin-top: 10px;
    }

    .beritapop li{
        flex-basis: 50%;
    }

    .beritalat{
        display: block;
    }

    .beritalat p{
        display: block;
    }

    .postingpop{
        margin-top: 40px
    }

    .posting_gbrlat{
        width: unset;
    }

    .postinglat{
        margin-top: 20px;
    }

    .postinglat .posting_gbrlat{
        margin-right: 20px;
        margin-top: 10px;
    }

    .kotakjudullat{
        flex-basis: auto;
        place-content: center;
    }

    /* Single page */

    .wrapsoc{
        flex-direction: column;
    }

    /* Archive Start */
    .archivelist .kotakjudul p{
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #caropost .posting .kotakauth{
        font-size: 75%;
    }

    /* End Archive */

    /* End single page */

}

@media screen and (max-width:885px) {
    :root{
        --maxwidth: 100%;
        --center: 20px;
    }
    .featpost.display1 .kotakjudul{
        padding: 20px;
    }
    .featpost.display1 .posting .kotakjudul > p{
        display: -webkit-box !important;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width:767px) {
    :root{
        --maxwidth: 100%;
        --center: 20px;
    }
    
    .logo img{
        max-width:100%;
    }
    .featpost .posting .imgpostwrap{
        height: 250px;
    }

    .beritabaru{
        grid-template-columns: repeat(2, 1fr);
    }

    .link{
        background: none;
    }
    .featpost.display1 .posting a{
        flex-basis: unset;
    }
    .featpost.display1 .imgpostwrap{
        width: 700px;
        height: 500px;
    }
    .featpost.display1 .kotakjudul{
        position: absolute;
        flex-basis: unset;
    }

    .beritapop{
        display: block;
    }

    .beritapop p{
        display: none;
    }

    .postingpop{
        margin-top: unset;
    }

    .beritapop .postingpop{
        display: block;
        width: 100%;
    }

    .beritalat{
        display: block;
    }

    .beritalat p{
        display: none;
    }

    .postinglat{
        margin-top: unset;
    }
    .postinglat .kotakjudullat h4 a{
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* .featcats .posting .kotakjudul{
        font-size: 80%;
    } */

    .featcats .posting:first-child{
        height: 300px !important;
        float: unset;
        margin-right: unset;
        margin-bottom: 20px;
        width: 100%;
    }

    .featcats .posting:first-child .kotakjudul h2 a{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .featcats .posting .imgpostwrap{
        width: 100%;
        height: 100%;
    }

    .featcats .listbox{
        place-items: center;
        flex-direction: row;
        font-size: 100%;
    }

    .hotnews .postingfeat{
        max-height: 200px;
    }
    .hotnews .postingfeat .kotakcat.cardfeat .cust_category{
        display: unset;
    }
    .hotnews .postingfeat .kotakcat.cardfeat .cust_category li{
        display: inline;
    }
    .hotnews .postingfeat .kotakcat.cardfeat .cust_category li a{
        display: inline-block;
        margin: 0 3px 3px 0;
    }
    /* .hotnews .postingfeat .kotakjudulfeat{
        font-size: 80%;
    } */

    .postingfeat .kotakjudulfeat > p{
        display: none;
    }

    .featpost .posting .kotakjudul h2 a{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .postingfeat .kotakjudulfeat div:nth-child(2) h4{
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .postingfeat h4 a:hover{
        color: var(--color1);
    }
    #caropost .posting .kotakjudul h4 a{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    .archivelist .postinglist .kotakcat.cardlist .cust_category{
        display: unset;
    }
    .archivelist .postinglist .kotakcat.cardlist .cust_category li{
        display: inline;
    }
    .archivelist .postinglist .kotakcat.cardlist .cust_category li a{
        display: inline-block;
        margin: 0 3px 3px 0;
    }

    footer{
        display: block;
    }
}

@media screen and (max-width:584px) {
    :root{
        --maxwidth: 100%;
        --center: 20px;
    }
    .featpost.display1 .posting .kotakjudul > p{
        -webkit-line-clamp: 4;
    }
    #caropost .posting .kotakjudul h4 a{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .featpost{
        grid-template-columns: 100%;
    }
    .beritabaru{
        gap: 10px;
    }
    .beritabaru .posting .kotakjudul .kotakauth .authby{
        display: none;
    }
    .beritabaru .imgpostwrap{
        height: 160px;
    }

}

@media screen and (max-width:479px) {
    :root{
        --maxwidth: 100%;
        --center: 20px;
    }
    header{
        width: 100%;
    }
    .navi{
        place-content: start;
    }
    .featpost.display1 .posting{
        height: 400px;
    }
    .featpost.displat1 .posting .kotakjudul h2 a{
        -webkit-line-clamp: unset!important;
    }
    .featpost.display1 .posting .kotakjudul > p{
        display: none!important;
    }
    .postingfeat:nth-child(even) {
        flex-direction: row;
    }
    .beritabaru .kotakauth{
        font-size: 75%;
    }
    .hotnews .postingfeat{
        display: flex;
        flex-direction: row;
    }
    .hotnews .readmore{
        display: none;
    }
    .hotnews .postingfeat .posting_gbrfeat{
        flex-basis: 50%;
        width: 290px;
        height: 100%;
    }
    .kotakjudulfeat{
        text-align: left;
        place-items: start;
        place-content: unset;
        flex-basis: 50%;
    }
    .kotakjudulfeat h4 a{
        font-size: 95%;
    }
    .postingfeat .kotakauthfeat{
        font-size: 75%;
    }
    .postingfeat .kotakjudulfeat div:nth-child(2) h4{
        -webkit-line-clamp: 4;
    }
    .postingfeat .kotakjudulfeat{
        padding: 0;
    }
    .hotnews .postingfeat{
        gap: 15px;
    }
    #caropost .posting .kotakjudul h4 a{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .archivelist .postinglist .kotakjudul p{
        display: none !important;
    }
    .archivelist .postinglist .kotakjudul a{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .archivelist .postinglist .kotakauth{
        display: -webkit-box;
    }
    .archivelist .postinglist .posting_gbrlist{
        height: 120px;
    }
}

@media screen and (max-width:415px) {
    :root{
        --maxwidth: 100%;
        --center: 20px;
    }
    .owl-item .posting .imgpostwrap{
        height: 200px;
    }
}