/*BERANDA */
@media only screen and (max-width: 1230px)
{
    .box-lg-1
    {
        width: 8.333333333%;
    }
    .box-lg-2
    {
        width: 16.66666667%;
    }
    .box-lg-3
    {
        width: 25%;
    }
    .box-lg-4
    {
        width: 33.33333333%;
    }
    .box-lg-5
    {
        width: 41.66666667%;
    }
    .box-lg-6
    {
        width: 50%;
    }
    .box-lg-7
    {
        width: 58.33333333%;
    }
    .box-lg-8
    {
        width: 66.66666667%;
    }
    .box-lg-9
    {
        width: 75%;
    }
    .box-lg-10
    {
        width: 83.33333333%;
    }
    .box-lg-11
    {
        width: 91.66666667%;
    }
    .box-lg-12
    {
        width: 100%;
    }


    .sidebar
    {
        left: -500px;

        width: 30%;
    }

    .button-menu
    {
        left: 31%;

        opacity: 0;
    }
    .button-show
    {
        left: 3%;

        display: block !important;
    }

    .container
    {
        grid-template-columns: 98%;
    }
}

@media only screen and (max-width: 1034px)
{
    .data
    {
        transition: .3s linear;
    }
    .box-md-1
    {
        width: 8.333333333%;
    }
    .box-md-2
    {
        width: 16.66666667%;
    }
    .box-md-3
    {
        width: 25%;
    }
    .box-md-4
    {
        width: 33.33333333%;
    }
    .box-md-5
    {
        width: 41.66666667%;
    }
    .box-md-6
    {
        width: 50%;
    }
    .box-md-7
    {
        width: 58.33333333%;
    }
    .box-md-8
    {
        width: 66.66666667%;
    }
    .box-md-9
    {
        width: 75%;
    }
    .box-md-10
    {
        width: 83.33333333%;
    }
    .box-md-11
    {
        width: 91.66666667%;
    }
    .box-md-12
    {
        width: 100%;
    }

    .push-md-1
    {
        margin-left: 8.333333333%;
    }
    .push-md-2
    {
        margin-left: 16.66666667%;
    }
    .push-md-3
    {
        margin-left: 25%;
    }
    .push-md-4
    {
        margin-left: 33.33333333%;
    }
    .push-md-5
    {
        margin-left: 41.66666667%;
    }
    .push-md-6
    {
        margin-left: 50%;
    }
    .push-md-7
    {
        margin-left: 58.33333333%;
    }
    .push-md-8
    {
        margin-left: 66.66666667%;
    }
    .push-md-9
    {
        margin-left: 75%;
    }
    .push-md-10
    {
        margin-left: 83.33333333%;
    }
    .push-md-11
    {
        margin-left: 91.66666667%;
    }
    .push-md-12
    {
        margin-left: 100%;
    }

    /*HALAMAN BERANDA*/
    .box-siswa div.message h2
    {
        font-size: 1em;
    }
}

@media only screen and (max-width: 767px)
{
    .data
    {
        transition: .3s linear;
    }
    .push-mds-reset
    {
        margin: 0;
    }
    .box-mds-1
    {
        width: 8.333333333%;
    }
    .box-mds-2
    {
        width: 16.66666667%;
    }
    .box-mds-3
    {
        width: 25%;
    }
    .box-mds-4
    {
        width: 33.33333333%;
    }
    .box-mds-5
    {
        width: 41.66666667%;
    }
    .box-mds-6
    {
        width: 50%;
    }
    .box-mds-7
    {
        width: 58.33333333%;
    }
    .box-mds-8
    {
        width: 66.66666667%;
    }
    .box-mds-9
    {
        width: 75%;
    }
    .box-mds-10
    {
        width: 83.33333333%;
    }
    .box-mds-11
    {
        width: 91.66666667%;
    }
    .box-mds-12
    {
        width: 100%;
    }


    .push-mds-1
    {
        margin-left: 8.333333333%;
    }
    .push-mds-2
    {
        margin-left: 16.66666667%;
    }
    .push-mds-3
    {
        margin-left: 25%;
    }
    .push-mds-4
    {
        margin-left: 33.33333333%;
    }
    .push-mds-5
    {
        margin-left: 41.66666667%;
    }
    .push-mds-6
    {
        margin-left: 50%;
    }
    .push-mds-7
    {
        margin-left: 58.33333333%;
    }
    .push-mds-8
    {
        margin-left: 66.66666667%;
    }
    .push-mds-9
    {
        margin-left: 75%;
    }
    .push-mds-10
    {
        margin-left: 83.33333333%;
    }
    .push-mds-11
    {
        margin-left: 91.66666667%;
    }
    .push-mds-12
    {
        margin-left: 100%;
    }

    .box-height
    {
        height: 80px;
    }

    .detail-data .data h3
    {
        font-size: .9em;
    }
    .detail-data .data h4
    {
        font-size: .9em;
    }
    /*SIDEBAR*/
    .sidebar
    {
        width: 50%;
    }

    .button-menu
    {
        left: 51%;
    }

    .selector a
    {
        font-size: .9em;
    }
}

@media only screen and (max-width: 532px)
{
    .push-sm-reset
    {
        margin: 0;
    }
    .box-sm-1
    {
        width: 8.333333333%;
    }
    .box-sm-2
    {
        width: 16.66666667%;
    }
    .box-sm-3
    {
        width: 25%;
    }
    .box-sm-4
    {
        width: 33.33333333%;
    }
    .box-sm-5
    {
        width: 41.66666667%;
    }
    .box-sm-6
    {
        width: 50%;
    }
    .box-sm-7
    {
        width: 58.33333333%;
    }
    .box-sm-8
    {
        width: 66.66666667%;
    }
    .box-sm-9
    {
        width: 75%;
    }
    .box-sm-10
    {
        width: 83.33333333%;
    }
    .box-sm-11
    {
        width: 91.66666667%;
    }
    .box-sm-12
    {
        width: 100%;
    }

    .push-sm-1
    {
        margin-left: 8.333333333%;
    }
    .push-sm-2
    {
        margin-left: 16.66666667%;
    }
    .push-sm-3
    {
        margin-left: 25%;
    }
    .push-sm-4
    {
        margin-left: 33.33333333%;
    }
    .push-sm-5
    {
        margin-left: 41.66666667%;
    }
    .push-sm-6
    {
        margin-left: 50%;
    }
    .push-sm-7
    {
        margin-left: 58.33333333%;
    }
    .push-sm-8
    {
        margin-left: 66.66666667%;
    }
    .push-sm-9
    {
        margin-left: 75%;
    }
    .push-sm-10
    {
        margin-left: 83.33333333%;
    }
    .push-sm-11
    {
        margin-left: 91.66666667%;
    }
    .push-sm-12
    {
        margin-left: 100%;
    }

    /*SIDEBAR*/
    .sidebar
    {
        width: 80%;
    }

    .button-menu
    {
        position: fixed;
        z-index: 111111;
        top: 0;
        left: 68%;
    }

    /*HALAMAN SIKEL*/
    .box-sekolah .data-kepsek p
    {
        font-size: .8em;
    }
    .box-sekolah .data-box p
    {
        font-size: .7em;
    }
    .message h2
    {
        font-size: .9em !important;
    }

    .detail-foto img
    {
        object-fit: contain;
    }
    .box-sekolah .data-box img
    {
        object-fit: contain;
    }

    .headbar
    {
        padding-bottom: 50px;
    }

    /*
		Index Utama Siswa
	*/
    /*TOMBOL ADD*/
    .wrap-bottom
    {
        position: relative;
        z-index: 0;

        margin-top: -20px;
        margin-bottom: 50px;
    }
    .add_batt
    {
        justify-content: center;
        align-items: center;
    }
    .paging_buts
    {
        position: absolute;
        right: 0;
        bottom: -100px;
        left: 0;

        display: flex;

        height: 100px;
        margin-top: 10px;

        justify-content: center;
        align-items: center;
    }
    .wrapper-paging
    {
        position: relative;
        right: 4px;

        display: flex;

        justify-content: center;
        flex-wrap: wrap;
    }

    .paging a,
    .paging span
    {
        margin-bottom: 5px;
    }
    /*
		
		SUB HEADER

	*/
    .nav
    {
        font-size: .9em;
    }
    /*
		FORM 
	*/

    .buttons
    {
        margin-top: 0;
    }
    .gap-bott
    {
        margin-bottom: 15px;
    }

    .border-sm-1
    {
        border: 1px solid dodgerblue;
    }

    .bio
    {
        margin-bottom: 250px;
    }
    .selector a
    {
        float: left;

        text-align: center;
    }
    .selector-form
    {
        position: fixed;
        z-index: 99;
        bottom: 0;
        left: 0;

        width: 100%;
    }
    .bio p
    {
        font-size: .9em;
    }
    /* INDEX UTAMA */
    .message table tr th:first-child
    {
        width: 50%;
    }
}

@media only screen and (max-width: 440px)
{
    .box-smm-1
    {
        width: 8.333333333%;
    }
    .box-smm-2
    {
        width: 16.66666667%;
    }
    .box-smm-3
    {
        width: 25%;
    }
    .box-smm-4
    {
        width: 33.33333333%;
    }
    .box-smm-5
    {
        width: 41.66666667%;
    }
    .box-smm-6
    {
        width: 50%;
    }
    .box-smm-7
    {
        width: 58.33333333%;
    }
    .box-smm-8
    {
        width: 66.66666667%;
    }
    .box-smm-9
    {
        width: 75%;
    }
    .box-smm-10
    {
        width: 83.33333333%;
    }
    .box-smm-11
    {
        width: 91.66666667%;
    }
    .box-smm-12
    {
        width: 100%;
    }

    .push-smm-reset
    {
        margin: 0;
    }
    .push-smm-1
    {
        margin-left: 8.333333333%;
    }
    .push-smm-2
    {
        margin-left: 16.66666667%;
    }
    .push-smm-3
    {
        margin-left: 25%;
    }
    .push-smm-4
    {
        margin-left: 33.33333333%;
    }
    .push-smm-5
    {
        margin-left: 41.66666667%;
    }
    .push-smm-6
    {
        margin-left: 50%;
    }
    .push-smm-7
    {
        margin-left: 58.33333333%;
    }
    .push-smm-8
    {
        margin-left: 66.66666667%;
    }
    .push-smm-9
    {
        margin-left: 75%;
    }
    .push-smm-10
    {
        margin-left: 83.33333333%;
    }
    .push-smm-11
    {
        margin-left: 91.66666667%;
    }
    .push-smm-12
    {
        margin-left: 100%;
    }

    .message h1
    {
        font-size: 1em;
    }

    #nama_mapel
    {
        font-size: 1em;
    }

    .selector
    {
        position: fixed;
        z-index: 99;
        bottom: 0;
        left: 0;

        width: 100%;
    }
    .detail-data
    {
        margin-bottom: 150px;
    }

    .sidebar
    {
        z-index: 999;
    }
    .box-message
    {
        display: none;
    }
}