@media (max-width:1200px) {
    .container {
        padding: 30px;
    }
    .container._wide {
        padding: 40px 30px;
    }

    /* Hero */
    #hero ._item ._content {
        left: 30px;
    }
}

@media (max-width:1080px) {
    /* Header */
    #header .socmed {
        display: none;
    }
    .top-logo {
        margin-right: auto;
    }

    /* Top Menu */
    .toggle-menu {
        display: flex;
        flex-shrink: 0;
    }
    .toggle-menu.swap {
        position: fixed;
        left: 255px;
        top: 10px;
        z-index: 100;
    }
    nav.top-menu {
        background: var(--color1);
        position: fixed!important;
        top: 0;
        left: 0;
        padding: 10px;
        width: 300px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
        z-index: 99;
        box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1);
    }
    nav.top-menu > ul > li {
        padding-left: 5px;
    }
    nav.top-menu::-webkit-scrollbar {
        display: none;
    }
    nav.top-menu:hover::-webkit-scrollbar {
        display: block;
    }
    nav.top-menu ul {
        flex-direction: column;
    }
    nav.top-menu > ul > li {
        border-bottom: 1px solid #00000020;
    }
    nav.top-menu ul li:last-child {
        border-bottom: none;
    }
    nav.top-menu > ul > li:has(.children),
    nav.top-menu > ul > li:has(.sub-menu) {
        padding-right: 0;
    }
    nav.top-menu > ul > li > .children,
    nav.top-menu > ul > li > .sub-menu {
        position: relative;
        padding: 5px 0 0 0;
        width: 100%;
        border: none;
        background: none;
        max-width: calc(100% - 5px);
        border-radius: 0;
    }
    nav.top-menu li._active span.fas {
        top: 15px;
        transform: none; 
    }

    /* Information */
    #information.container {
        flex-direction: column;
    }
    #information .loop._berita {
        display: flex;
        gap: 20px;
    }
    #information .loop._berita ._pigura {
        width: 40%;
        height: auto;
    }

    /* Archive */
    .grid._staf {
        grid-template-columns: repeat(3, 1fr)!important;
    }

    /* Content */
    #content.two-column {
        flex-direction: column;
    }
    #content.two-column > * {
        width: 100%;
        position: unset;
        height: auto;
    }

    /* Footer */
    #footer {
        flex-direction: column;
    }
    
}

/* Kebutuhan Customizer WordPress */
@media (max-width:760px) {
    /* Header */
    .top-logo {
        margin-right: unset;
    }
    .top-contact {
        display: none;
    }
    .dark-mode {
        border: none;
        padding: 0;
    }

    /* Stats */
    #stats ._content {
        flex-wrap: wrap;
    }
    #stats ._content ._item {
        width: 33.333%;
        flex: unset;
    }
    #stats ._content ._item:nth-child(3)::after {
        display: none;
    }

    /* Welcome */
    /* #welcome ._image {
        display: none;
    } */

    #welcome {
        flex-direction: column;
        align-items: center;
    }
    #welcome ._title {
        align-items: center;
        text-align: center;
    }
    #welcome ._title > * {
        width: 100%;
    }
    #welcome ._title h2 span {
        align-self: unset!important;
    }
    #welcome ._title h2:after {
        background: linear-gradient(to right, transparent, var(--color2), transparent);
        margin-left: auto;
    }


    /* CTA */
    #cta._thumb {
        overflow: hidden;
    }
    #cta._thumb ._title {
        min-height: 240px;
        padding-left: 0;
        max-width: 800px;
        position: relative;
    }
    #cta._thumb ._img {
        width: 100%;
        bottom: unset;
        top: 0;
        opacity: .1;
        z-index: -1;
    }

    /* Fasilitas & Ekskul */
    .loop._fasilitas,
    .loop._ekskul {
        flex-direction: column;
    }
    .loop._fasilitas ._pigura,
    .loop._ekskul ._pigura {
        width: 100%;
        height: 200px;
    }
    .grid._res {
        grid-template-columns: repeat(2, 1fr)!important;
    }
    .list._res ._excerpt {
        display: none!important;
    }

    .head-archive {
        flex-direction: column;
    }

    /* Single */
    .single-content ._detail .shareit {
        margin-left: unset;
    }
    .single-content._staf ._info {
        flex-direction: column;
    }
    .single-content._staf ._detail {
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 0!important;
        width: 100%;
    }
    .single-content._staf ._detail li {
        border-bottom: 1px solid var(--colorborder);
        padding: 5px 0;
    }
    .single-content._staf ._featured {
        width: 150px;
        height: 150px;
    }
    
}

@media (max-width:690px) {

    /* Customizer */
    .customize-partial-edit-shortcut {
        display: none!important;
    }
    body {
        font-size: 15px!important;
    }

    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.2em;
    }

    /* Container */
    .container {
        padding: 20px 15px;
    }
    .container._wide {
        padding: 40px 15px;
    }

    /* Hero */
    #hero ._item ._content {
        max-width: 100%;
        left: 0;
        padding-left: 30px;
        padding-right: 30px;
        text-align: center;
    }
    #hero ._item ._image {
        height: 500px!important;
    }
    #hero ._item ._content h2 {
        font-size: 2em;
    }
    #hero ._item ._content .bttn {
        align-self: center!important;
    }
    #hero .splide__arrows {
        display: none;
    }

    /* Program */

    #program._thumb {
        padding-top: 40px;
    }
    #program._thumb ._title {
        min-height: unset;
        margin-bottom: 30px;
    }
    #program._thumb ._title h2,
    #program._thumb ._title p {
        max-width: calc(100% - 100px);
    }
    #program._thumb ._img {
        display: none;
    }
    #program._thumb > ._content {
        padding-top: 0;
        border-top: none;
    }
    #program._thumb > ._title._left ._more {
        align-self: unset;
        position: absolute;
    }

    /* Loop */
    .loop ._content {
        padding: 10px;
        gap: 5px!important;
    }
    .loop ._detail {
        font-size: .8em;
    }
    .loop ._content h3 {
        font-size: 1em!important;
    }

    /* Single */
    .single-content ._gallery ._thumbnail img {
        width: 90px;
    }
    .single-content ._video iframe {
        height: 200px;
    }

    /* Comment */
    .comment-form {
        grid-template-columns: 100%;
    }
    .comment-notes, .comment-form-comment, .comment-form-cookies-consent, .form-submit {
        grid-column: unset;
    }

    /* PPDB */
    .ppdb-step {
        gap: 15px;
    }
    .ppdb-row {
        flex-direction: column;
        gap: 5px;
    }
    .ppdb-row > * {
        width: 100%;
    }

}

@media (max-width:480px) {

    /* Header */
    #header {
        padding: 0;
    }
    .top-header {
        padding: 15px;
        border-radius: 0;
    }
    .top-logo .logo-web {
        max-width: 200px;
    }

    #stats ._content ._item {
        width: 50%;
    }
    #stats ._content ._item:nth-child(2)::after {
        display: none;
    }

    /* Container */
    .container ._title._left h2,
    .container ._title._left p {
        max-width: 100%!important;
    }
    .container > ._title._left ._more {
        position: inherit!important;
        align-self: flex-start!important;
    }

    /* Loop */
    .grid._res:not(._staf) {
        grid-template-columns: repeat(1, 1fr)!important;
    }
    .loop._staf ._pigura {
        height: 200px;
    }
    #other-post .loop._agenda {
        flex-direction: column;
    }
    #other-post .loop._agenda ._start {
        width: 100%;
    }

    .single-content ._detail li {
        flex-wrap: wrap;
    }
    .single-content._ekskul ._detail {
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 0!important;
        width: 100%;
    }
    .single-content._ekskul ._detail li {
        border-bottom: 1px solid var(--colorborder);
        padding: 5px 0;
    }
    .single-content._ekskul ._detail li:last-child {
        border-bottom: none;
    }
}