/* Tampilan Resolusi FHD */
@media screen and (min-width: 1920px) {

    #wrapper_body {
        position: relative;
        z-index: 1;
        /* background-color: #ebf9ff; */
        background-color: white;
        transform: translate(0%, -14vh);
    }

    #header {
        padding: 1.5% 0 1% 0;
        overflow: auto;
        /*background-image: url('../images/header1.jpg');*/
        filter: brightness(50%);
        background-size: cover;
        background-position-y: 65vh;
        height: 23vh;
        margin: auto;
        position: relative;
        z-index: 1;
    }


    #inner-header {
        position: relative;
        z-index: 2;
        padding: 0%;
        /* background-color: brown; */
        max-width: 43vw;
        margin: auto;
        /* margin-top: 1.5%; */
        text-align: center;
        transform: translate(0%, 16vh);
    }

    #logo_kemendikbud {
        width: 90%;
    }

    #center {
        margin: auto;
        color: ivory;
        /* width: 70%; */
        /* border: 3px solid #73AD21; */
        /* padding: 10px; */
    }

    #table {
        /* background: #ffe7bc; */
        position: relative;
        top: -4vh;
        /* left: 50px; */
        margin: auto;
        width: 95%;
        z-index: 3;
    }

    #content-wrapper {

        /* background-color: sandybrown; */
        height: 50vh;
        padding: 0 0 1% 0;
        margin: 0 2.5%;
        /* overflow: hidden; */
        /* border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    }

    #content {
        /* background-color: blueviolet; */
        height: 100%;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #all_content {
        /* background-color: chartreuse; */
        height: 40vh;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #video {
        background-color: white;
        height: 40vh;
        width: 40%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
        overflow: hidden;
        padding: 0.4%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    #video_konten {
        border-radius: 7.5px;
        overflow: hidden;
        background-color: black;
    }

    #foto_notif_atas {
        background-color: white;
        width: 96%;
        height: 98.5%;
        margin: 0 auto 1.5% auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        align-items: center;
        overflow: hidden;
    }

    #foto_notif_bawah {
        background-color: white;
        width: 96%;
        height: 98.5%;
        margin: 1.5% auto 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        align-items: center;
        overflow: hidden;
    }

    .judul_notif {
        color: #fff;
        background-color: dodgerblue;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 100%;
        margin: 0 0 1.5% 0;
        height: 20%;
        text-align: center;
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        padding-top: 0.5vh;
    }

    .isi_notif {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .foto_notif {
        background-color: thistle;
        width: 30%;
        height: 73%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .info_pegawai {
        background-color: #F8F6FF;
        width: 65.5%;
        height: 73%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .info_pegawai_null {
        background-color: #F8F6FF;
        width: 100%;
        height: 73%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .pegawai {

        align-items: center;
        margin: auto;
        width: 80%;
    }

    .pegawai_null {

        align-items: center;
        margin: auto;
        width: 425px;
    }

    .nama_pegawai {
        /* background-color: yellowgreen; */
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    .keterangan_pegawai {
        /* background-color: violet; */
        font-size: 0.8vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    .terlambat_pegawai {
        /* background-color: yellow; */
        font-size: 0.8vw;
        font-family: 'Lexend Deca', sans-serif;
        line-height: 1vh;
    }

    hr {
        border: none;
        height: 1px;
        /* Set the hr color */
        color: #00AAD4;
        /* old IE */
        background-color: #000;
        /* Modern Browsers */
        margin: 0;
    }

    #pegawai_atas {
        /* Biar float tengah */
        display: flex;
        align-items: center;

        /* background-color: khaki; */
        height: 50%;
        width: 25%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    .konten_notif_atas {
        background-color: white;
        /* background-image: url('../images/header1.jpg'); */
        width: 100%;
        height: 98.5%;
        margin: 0 auto 1.5% auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        /* display: flex; */
        align-items: center;
        z-index: 1;
    }

    #fotokonten {
        background-image: url('../images/header1.jpg');
        filter: brightness(50%) blur(1.25px);
        width: 96%;
        height: 88%;
        margin: 0 auto;
        background-position: center;
        background-size: cover;
        /* display: flex; */
        transform: translate(0%, 6%);
        z-index: 1;
        border-radius: 7.5px;
    }

    .ket_notif {
        margin: 0 auto;
        position: relative;
        top: -11.5vh;
        color: white;
        /* background-color: #55acee; */
        width: 25.5vw;
        height: 8vh;
        text-align: center;
        line-height: 2vh;
    }

    #isi-notif-ket {
        position: absolute;
        font-weight: bold;
        /* background-color: blueviolet; */
        font-family: 'Lexend Deca', sans-serif;
        width: 25.5vw;
        height: 8vh;
        text-align: center;
        line-height: 2.75vh;
        overflow: hidden;
        font-size: 1.5rem;
        text-transform: uppercase;
    }

    #notif_atas {
        /* background-color: violet; */
        height: 50%;
        width: 35%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #pegawai_bawah {
        /* Biar float tengah */
        display: flex;
        align-items: center;

        /* background-color: khaki; */
        height: 50%;
        width: 25%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    .konten_notif_bawah {
        /* background-color: white; */
        width: 100%;
        height: 98.5%;
        margin: 1% auto 0 auto;
        /* border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        display: flex;
        align-items: center;
    }

    #notif_bawah {
        /* background-color: lightpink; */
        height: 50%;
        width: 35%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #notif_bawah_kiri {
        background-color: white;
        width: 30%;
        height: 100%;
        margin: 0 1.5% 0 0;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
        padding: 2%;
    }

    #notif_bawah_kanan {
        background-color: white;
        width: 74%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
        padding: 2%;
    }

    #wrapper_bawah_kanan {
        /* background-color: brown; */
        width: 100%;
        margin: 0 auto;
    }

    #jam {
        /* background-color: burlywood; */
        width: 100%;
    }

    #tanggal {
        color: white;
        margin: 1vh 0 0 0;
        width: 100%;
        border-radius: 10px;
        background-color: #00AAD4;
        font-size: 1.5rem;
        text-align: center;
        font-family: 'Lexend Deca', sans-serif;
    }

    /* Jam */

    .clock {
        position: relative;
        font-family: monaco, consolas, "courier new", monospace;
        font-size: 3.2rem;
        line-height: 1.375;
        text-align: center;

    }

    .clock:before,
    .clock:after {
        position: absolute;
        top: 0;
        bottom: 0;
        content: ':';
        z-index: 2;
        line-height: 1.15;
        color: #00AAD4;
    }

    .clock:before {
        left: 2.325em;
    }

    .clock:after {
        right: 2.325em;
    }

    .clock span {
        position: relative;
        display: inline-block;
        padding: 0 .25em;
        margin: 0 .06125em;
        z-index: 1;

        -webkit-transform: perspective(750);
        -moz-transform: perspective(750);
        -ms-transform: perspective(750);
        transform: perspective(750);

        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .clock span:first-child {
        margin-left: 0;
    }

    .clock span:last-child {
        margin-right: 0;
    }

    .clock span:nth-child(2),
    .clock span:nth-child(4) {
        margin-right: .3em;
    }

    .clock span:nth-child(3),
    .clock span:nth-child(5) {
        margin-left: .3em;
    }

    .clock span:before,
    .clock span:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: #eee;
        text-shadow: 0 1px 0 #fff;
        background: #00AAD4;
        border-radius: .125em;
        outline: 1px solid transparent;
        /* fix jagged edges in ff */

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;

        -webkit-transition: -webkit-transform .75s, opacity .75s;
        -moz-transition: -moz-transform .75s, opacity .75s;
        -ms-transition: -ms-transform .75s, opacity .75s;
        transition: transform .75s, opacity .75s;
    }

    .clock span:before {
        opacity: 1;
        z-index: 1;
        content: attr(data-old);

        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;

        -webkit-transform: translate3d(0, 0, 0) rotateX(0);
        -moz-transform: translate3d(0, 0, 0) rotateX(0);
        -ms-transform: translate3d(0, 0, 0) rotateX(0);
        transform: translate3d(0, 0, 0) rotateX(0);
    }

    .clock span:after {
        opacity: 0;
        z-index: 2;
        content: attr(data-now);

        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;

        -webkit-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        -moz-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        -ms-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        transform: translate3d(0, -102.5%, 0) rotateX(90deg);
    }

    .clock .flip:before {
        opacity: 0;
        -webkit-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        -moz-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        -ms-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
    }

    .clock .flip:after {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) rotateX(0);
        -moz-transform: translate3d(0, 0, 0) rotateX(0);
        -ms-transform: translate3d(0, 0, 0) rotateX(0);
        transform: translate3d(0, 0, 0) rotateX(0);
    }

    /* end Jam */

    #running_text {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        font-family: 'Lexend Deca', sans-serif;
        font-size: 1.5rem;
        color: #00AAD4;
        border-radius: 10px;
        /* border: solid #00AAD4; */
        /* background-color: darkkhaki; */
        height: 6vh;
        padding: 0 1% 0 1%;
        margin: 2vh 0 0 0;
        display: flex;
        align-items: center;
    }

    #footer {
        /* background-color: aquamarine; */
        height: 5vh;
        padding: 0%;
        margin: 0 2.5% 0 2.5%;
        display: flex;
    }

    #judul1 {
        font-size: 2.5vw;
        font-family: 'Lexend Deca', sans-serif;
        z-index: 2;
        transform: translate(0%, 0%);
    }

    #judul2 {
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        z-index: 2;
        transform: translate(0%, 0%);
    }

    #wrapper_footer {
        align-content: center;
        margin: 0 auto;
        display: flex;
        width: 100%;
        text-align: center;
    }

    .link {
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 0.7% 0 0 0;
        /* margin: 2px 2px 0 2px; */
        margin: 0 auto;
        /*background-color: #00AAD4;*/
        width: 18vw;
        height: 6vh;
        border-radius: 10px;
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        text-align: left;
        display: inline-block;
        /* display: flex; */
        /* align-items: center; */
    }

    .middle {
        /* background-color: teal; */
        margin: 0 auto;
        text-align: center;
        color: black;
        /* display: flex; */
    }

    .fa {
        border-radius: 7.5px;
        padding: 10px;
        font-size: 30px;
        width: 45px;
        text-align: center;
        text-decoration: none;
        /* margin: 5px 2px; */
    }

    .fa-facebook {
        background: #3b5998;
        color: white;
    }

    .fa-twitter {
        background: #55acee;
        color: white;
    }

    .fa-globe {
        background: #dd4b39;
        color: white;
    }

    .fa-youtube {
        background: #bb0000;
        color: white;
    }

    .fa-instagram {
        background: #125688;
        color: white;
    }

    #isi-tabel {
        text-align: center;
        font-size: 20px;
        height: 180px;
    }

}



/* Tampilan resolusi HD */
@media screen and (max-width: 1919px) and (min-width: 1366px) {

    body {
        position: relative;
        z-index: 1;
        background-color: #ebf9ff;
    }

    #wrapper_body {
        position: relative;
        z-index: 1;
        /* background-color: #ebf9ff; */
        background-color: white;
        transform: translate(0%, -14vh);
    }

    #header {
        /* background-color: chartreuse; */
        padding: 1.2% 0 1% 0;
        overflow: auto;
        /* background-color: blanchedalmond; */
        background-image: url('../images/header1.jpg');
        filter: brightness(50%);
        background-size: cover;
        background-position-y: 61vh;
        height: 20vh;
        margin: auto;
        position: relative;
        z-index: 1;
        /* -webkit-filter: blur(5px);
        filter: blur(5px); */
    }

    #inner-header {
        position: relative;
        z-index: 2;
        padding: 0%;
        /* background-color: brown; */
        max-width: 43vw;
        margin: auto;
        /* margin-top: 1.5%; */
        text-align: center;
        transform: translate(0%, 15vh);
    }

    #logo_kemendikbud {
        width: 90%;
    }

    #center {
        margin: auto;
        color: ivory;
        /* width: 70%; */
        /* border: 3px solid #73AD21; */
        /* padding: 10px; */
    }

    #table {
        /* background: #ffe7bc; */
        position: relative;
        top: -4vh;
        /* left: 50px; */
        margin: auto;
        width: 95%;
        z-index: 2;
    }

    #content-wrapper {
        /* background-color: sandybrown; */
        height: 50vh;
        padding: 0 0 1% 0;
        margin: 0 2.5%;
        /* overflow: hidden; */
        /* border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    }

    #content {
        /* background-color: blueviolet; */
        height: 100%;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #all_content {
        /* background-color: chartreuse; */
        height: 40vh;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #video {
        background-color: white;
        height: 40vh;
        width: 40%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
        overflow: hidden;
        padding: 0.4%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    #video_konten {
        border-radius: 7.5px;
        overflow: hidden;
        background-color: black;
    }

    #foto_notif_atas {
        background-color: white;
        width: 96%;
        height: 98.5%;
        margin: 0 auto 1.5% auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        align-items: center;
        overflow: hidden;
    }

    #foto_notif_bawah {
        background-color: white;
        width: 96%;
        height: 98.5%;
        margin: 1.5% auto 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        align-items: center;
        overflow: hidden;
    }

    .judul_notif {
        color: #fff;
        background-color: dodgerblue;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 100%;
        margin: 0 0 1.5% 0;
        height: 20%;
        text-align: center;
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        padding-top: 0.5vh;
    }

    .isi_notif {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .foto_notif {
        background-color: thistle;
        width: 30%;
        height: 73%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .info_pegawai {
        background-color: #F8F6FF;
        width: 65.5%;
        height: 73%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .info_pegawai_null {
        background-color: #F8F6FF;
        width: 100%;
        height: 73%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .pegawai {
        align-items: center;
        margin: auto;
        width: 80%;
    }

    .pegawai_null {
        align-items: center;
        margin: auto;
        width: 302px;
    }

    .nama_pegawai {
        /* background-color: yellowgreen; */
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    .keterangan_pegawai {
        /* background-color: violet; */
        font-size: 0.8vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    .terlambat_pegawai {
        /* background-color: yellow; */
        font-size: 0.8vw;
        font-family: 'Lexend Deca', sans-serif;
        line-height: 1vh;
    }

    hr {
        border: none;
        height: 1px;
        /* Set the hr color */
        color: #00AAD4;
        /* old IE */
        background-color: #000;
        /* Modern Browsers */
        margin: 0;
    }

    #pegawai_atas {
        /* Biar float tengah */
        display: flex;
        align-items: center;

        /* background-color: khaki; */
        height: 50%;
        width: 25%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    .konten_notif_atas {
        background-color: white;
        /* background-image: url('../images/header1.jpg'); */
        width: 100%;
        height: 98.5%;
        margin: 0 auto 1.5% auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        /* display: flex; */
        align-items: center;
        z-index: 1;
    }

    #fotokonten {
        background-image: url('../images/header1.jpg');
        -webkit-filter: brightness(50%) blur(1.25px);
        width: 96%;
        height: 88%;
        margin: 0 auto;
        background-position: center;
        background-size: cover;
        /* display: flex; */
        transform: translate(0%, 6%);
        z-index: 1;
        border-radius: 7.5px;
    }

    .ket_notif {
        margin: 0 auto;
        position: relative;
        top: -11.5vh;
        color: white;
        /* background-color: #55acee; */
        width: 25.5vw;
        height: 8vh;
        text-align: center;
        line-height: 2vh;
    }

    #isi-notif-ket {
        position: absolute;
        font-weight: bold;
        /* background-color: blueviolet; */
        font-family: 'Lexend Deca', sans-serif;
        width: 25.5vw;
        height: 8vh;
        text-align: center;
        line-height: 2.75vh;
        overflow: hidden;
        font-size: 1rem;
        text-transform: uppercase;
    } 

    #notif_atas {
        /* background-color: violet; */
        height: 50%;
        width: 35%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #pegawai_bawah {
        /* Biar float tengah */
        display: flex;
        align-items: center;

        /* background-color: khaki; */
        height: 50%;
        width: 25%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    .konten_notif_bawah {
        /* background-color: white; */
        width: 100%;
        height: 98.5%;
        margin: 1% auto 0 auto;
        /* border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        display: flex;
        align-items: center;
    }

    #notif_bawah {
        /* background-color: lightpink; */
        height: 50%;
        width: 35%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #notif_bawah_kiri {
        background-color: white;
        width: 30%;
        height: 100%;
        margin: 0 1.5% 0 0;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
        padding: 2%;
    }

    #notif_bawah_kanan {
        background-color: white;
        width: 74%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
        padding: 2%;
    }

    #wrapper_bawah_kanan {
        /* background-color: brown; */
        width: 100%;
        margin: 0 auto;
        /* height: 100%; */
        /* border-radius: 10px; */
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        /* display: flex; */
        /* align-items: center; */
        /* padding: 2%; */
    }

    #jam {
        /* background-color: burlywood; */
        width: 100%;
    }

    #tanggal {
        color: white;
        margin: 1.5vh 0 0 0;
        width: 100%;
        border-radius: 10px;
        background-color: #00AAD4;
        font-size: 1.25rem;
        text-align: center;
        font-family: 'Lexend Deca', sans-serif;
    }

    /* Jam */

    .clock {
        position: relative;
        font-family: monaco, consolas, "courier new", monospace;
        font-size: 2.3rem;
        line-height: 1.375;
        text-align: center;

    }

    .clock:before,
    .clock:after {
        position: absolute;
        top: 0;
        bottom: 0;
        content: ':';
        z-index: 2;
        line-height: 1.15;
        color: #00AAD4;
    }

    .clock:before {
        left: 2.325em;
    }

    .clock:after {
        right: 2.325em;
    }

    .clock span {
        position: relative;
        display: inline-block;
        padding: 0 .25em;
        margin: 0 .06125em;
        z-index: 1;

        -webkit-transform: perspective(750);
        -moz-transform: perspective(750);
        -ms-transform: perspective(750);
        transform: perspective(750);

        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .clock span:first-child {
        margin-left: 0;
    }

    .clock span:last-child {
        margin-right: 0;
    }

    .clock span:nth-child(2),
    .clock span:nth-child(4) {
        margin-right: .3em;
    }

    .clock span:nth-child(3),
    .clock span:nth-child(5) {
        margin-left: .3em;
    }

    .clock span:before,
    .clock span:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: #eee;
        text-shadow: 0 1px 0 #fff;
        background: #00AAD4;
        border-radius: .125em;
        outline: 1px solid transparent;
        /* fix jagged edges in ff */

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;

        -webkit-transition: -webkit-transform .75s, opacity .75s;
        -moz-transition: -moz-transform .75s, opacity .75s;
        -ms-transition: -ms-transform .75s, opacity .75s;
        transition: transform .75s, opacity .75s;
    }

    .clock span:before {
        opacity: 1;
        z-index: 1;
        content: attr(data-old);

        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;

        -webkit-transform: translate3d(0, 0, 0) rotateX(0);
        -moz-transform: translate3d(0, 0, 0) rotateX(0);
        -ms-transform: translate3d(0, 0, 0) rotateX(0);
        transform: translate3d(0, 0, 0) rotateX(0);
    }

    .clock span:after {
        opacity: 0;
        z-index: 2;
        content: attr(data-now);

        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;

        -webkit-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        -moz-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        -ms-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        transform: translate3d(0, -102.5%, 0) rotateX(90deg);
    }

    .clock .flip:before {
        opacity: 0;
        -webkit-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        -moz-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        -ms-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
    }

    .clock .flip:after {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) rotateX(0);
        -moz-transform: translate3d(0, 0, 0) rotateX(0);
        -ms-transform: translate3d(0, 0, 0) rotateX(0);
        transform: translate3d(0, 0, 0) rotateX(0);
    }

    /* end Jam */

    #running_text {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        font-family: 'Lexend Deca', sans-serif;
        font-size: 1.3rem;
        color: #00AAD4;
        border-radius: 10px;
        /* border: solid #00AAD4; */
        /* background-color: darkkhaki; */
        height: 6vh;
        padding: 0 1% 0 1%;
        margin: 2vh 0 0 0;
        display: flex;
        align-items: center;
    }

    #footer {
        /* background-color: aquamarine; */
        height: 3vh;
        padding: 0%;
        margin: 0 2.5% 0 2.5%;
    }

    #judul1 {
        font-size: 2vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    #judul2 {
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    #wrapper_footer {
        align-content: center;
        margin: 0 auto;
        display: flex;
        width: 100%;
        text-align: center;
    }

    .link {
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 0.7% 0 0 0;
        /* margin: 2px 2px 0 2px; */
        margin: 0 auto;
        /*background-color: #00AAD4;*/
        width: 18vw;
        height: 5vh;
        border-radius: 10px;
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        text-align: left;
        display: inline-block;
        /* display: flex; */
        /* align-items: center; */
    }

    .middle {
        /* background-color: teal; */
        margin: 0 auto;
        text-align: center;
        color: black;
        /* display: flex; */
    }

    .fa {
        border-radius: 7.5px;
        padding: 5px;
        font-size: 30px;
        width: 45px;
        text-align: center;
        text-decoration: none;
        /* margin: 5px 2px; */
    }

    .fa-facebook {
        background: #3b5998;
        color: white;
    }

    .fa-twitter {
        background: #55acee;
        color: white;
    }

    .fa-globe {
        background: #dd4b39;
        color: white;
    }

    .fa-youtube {
        background: #bb0000;
        color: white;
    }

    .fa-instagram {
        background: #125688;
        color: white;
    }

    #tr {
        height: 40px;
    }

    #th {
        font-size: 1vw;
        text-align: center;
    }

    #td {
        font-size: 1vw;
        text-align: center;
    }

    #isi-tabel {
        text-align: center;
        font-size: 20px;
        height: 150px;
    }

}


























/* Tampilan Resolusi Common Smartphone */
@media screen and (max-width: 1365px) and (min-width: 320px) {

    body {
        position: relative;
        z-index: 1;
        background-color: #ebf9ff;
    }


    #wrapper_body {
        position: relative;
        z-index: 1;
        /* background-color: #ebf9ff; */
        background-color: white;
        transform: translate(0%, -18vh);
    }

    #header {
        /* background-color: chartreuse; */
        padding: 5% 0 1% 0;
        overflow: auto;
        /* background-color: blanchedalmond; */
        background-image: url('../images/header1.jpg');
        filter: brightness(50%);
        background-size: cover;
        background-position-y: 25vh;
        height: 26vh;
        margin: auto;
        position: relative;
        z-index: 1;
        /* -webkit-filter: blur(5px);
        filter: blur(5px); */
    }

    #inner-header {
        position: relative;
        z-index: 2;
        padding: 0%;
        /* background-color: brown; */
        max-width: 60vw;
        margin: auto;
        /* margin-top: 1.5%; */
        text-align: center;
        transform: translate(0%, 20vh);
    }

    #logo_kemendikbud {
        width: 90%;
    }

    #center {
        margin: auto;
        color: ivory;
        /* width: 70%; */
        /* border: 3px solid #73AD21; */
        /* padding: 10px; */
    }

    #table {
        /* background: #ffe7bc; */
        position: relative;
        top: -4vh;
        /* left: 50px; */
        margin: auto;
        width: 95%;
        z-index: 2;
    }

    #content-wrapper {
        /* background-color: sandybrown; */
        height: 50vh;
        padding: 0 0 1% 0;
        margin: 0 2.5%;
        /* overflow: hidden; */
        /* border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    }

    #content {
        /* background-color: blueviolet; */
        height: 100%;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #all_content {
        /* background-color: chartreuse; */
        height: 15vh;
        padding: 0%;
        /* margin: 2.5%; */
    }

    #video {
        background-color: white;
        height: 40vh;
        width: 100%;
        float: left;
        padding: 0%;
        /* margin: 2.5%; */
        overflow: hidden;
        padding: 0.4%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    #video_konten {
        border-radius: 7.5px;
        overflow: hidden;
    }

    #foto_notif_atas {
        background-color: white;
        width: 96%;
        height: 98.5%;
        margin: 20% auto 1.5% auto;
        border-radius: 7px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
    }

    #foto_notif_bawah {
        background-color: white;
        width: 96%;
        height: 98.5%;
        margin: 20% auto 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
    }

    .judul_notif {
        color: #fff;
        background-color: dodgerblue;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 100%;
        margin: 0 0 1.5% 0;
        height: 20%;
        text-align: center;
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        padding-top: 0.5vh;
    }

    .isi_notif {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .foto_notif {
        background-color: thistle;
        width: 30%;
        height: 92%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .info_pegawai {
        background-color: #F8F6FF;
        width: 65.5%;
        height: 92%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .info_pegawai_null {
        background-color: #F8F6FF;
        width: 100%;
        height: 92%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: 0 0 0 1.5%;
        border-radius: 6px;
    }

    .pegawai {

        align-items: center;
        margin: auto;
        width: 80%;
    }

    .pegawai_null {
        align-items: center;
        margin: auto;
        width: 250px;
    }

    .nama_pegawai {
        /* background-color: yellowgreen; */
        font-size: 3vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    .keterangan_pegawai {
        /* background-color: violet; */
        font-size: 1.8vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    .terlambat_pegawai {
        /* background-color: yellow; */
        font-size: 1.8vw;
        font-family: 'Lexend Deca', sans-serif;
        line-height: 1vh;
    }

    hr {
        border: none;
        height: 1px;
        /* Set the hr color */
        color: #00AAD4;
        /* old IE */
        background-color: #000;
        /* Modern Browsers */
        margin: 0;
    }

    #pegawai_atas {
        /* Biar float tengah */
        display: flex;
        align-items: center;

        /* background-color: khaki; */
        height: 80%;
        width: 50%;
        float: left;
        padding: 0%;
        margin: -2.5% 0 0 0;
    }

    .konten_notif_atas {
        background-color: white;
        width: 100%;
        height: 98.5%;
        margin: 0 auto 1.5% auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
    }

    .ket_notif {
        /* background-color: tomato; */
        width: 100%;
        text-align: center;
        font-size: 3vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    #notif_atas {
        /* background-color: violet; */
        height: 80%;
        width: 50%;
        float: left;
        padding: 0%;
        margin: 2.5% 0 0 0;
    }

    #pegawai_bawah {
        /* Biar float tengah */
        display: flex;
        align-items: center;
        /* background-color: khaki; */
        height: 80%;
        width: 50%;
        float: left;
        padding: 0%;
        margin: -3.5% 0 0 0;
    }

    .konten_notif_bawah {
        /* background-color: white; */
        width: 100%;
        height: 98.5%;
        margin: -7% auto 0 auto;
        /* border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        display: flex;
        align-items: center;
    }

    #notif_bawah {
        /* background-color: lightpink; */
        height: 80%;
        width: 50%;
        float: left;
        padding: 0%;
        margin: 5% 0 0 0;
    }

    #notif_bawah_kiri {
        background-color: white;
        width: 100%;
        height: 100%;
        margin: 0 1.5% 0 0;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
        padding: 2%;
    }

    #notif_bawah_kanan {
        background-color: white;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: flex;
        align-items: center;
        padding: 2%;
    }

    #wrapper_bawah_kanan {
        /* background-color: brown; */
        width: 100%;
        margin: 0 auto;
        /* height: 100%; */
        /* border-radius: 10px; */
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        /* display: flex; */
        /* align-items: center; */
        /* padding: 2%; */
    }

    #jam {
        /* background-color: burlywood; */
        width: 100%;
    }

    #tanggal {
        color: white;
        margin: 0.1vh 0 0 0;
        width: 100%;
        border-radius: 10px;
        background-color: #00AAD4;
        font-size: 0.45rem;
        text-align: center;
        font-family: 'Lexend Deca', sans-serif;
    }

    /* Jam */


    .clock {
        position: relative;
        font-family: monaco, consolas, "courier new", monospace;
        font-size: 0.6rem;
        line-height: 1.375;
        text-align: center;

    }

    .clock:before,
    .clock:after {
        position: absolute;
        top: 0;
        bottom: 0;
        content: ':';
        z-index: 2;
        line-height: 1.15;
        color: #00AAD4;
    }

    .clock:before {
        left: 2.325em;
    }

    .clock:after {
        right: 2.325em;
    }

    .clock span {
        position: relative;
        display: inline-block;
        padding: 0 .25em;
        margin: 0 .06125em;
        z-index: 1;

        -webkit-transform: perspective(750);
        -moz-transform: perspective(750);
        -ms-transform: perspective(750);
        transform: perspective(750);

        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .clock span:first-child {
        margin-left: 0;
    }

    .clock span:last-child {
        margin-right: 0;
    }

    .clock span:nth-child(2),
    .clock span:nth-child(4) {
        margin-right: .3em;
    }

    .clock span:nth-child(3),
    .clock span:nth-child(5) {
        margin-left: .3em;
    }

    .clock span:before,
    .clock span:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: #eee;
        text-shadow: 0 1px 0 #fff;
        background: #00AAD4;
        border-radius: .125em;
        outline: 1px solid transparent;
        /* fix jagged edges in ff */

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;

        -webkit-transition: -webkit-transform .75s, opacity .75s;
        -moz-transition: -moz-transform .75s, opacity .75s;
        -ms-transition: -ms-transform .75s, opacity .75s;
        transition: transform .75s, opacity .75s;
    }

    .clock span:before {
        opacity: 1;
        z-index: 1;
        content: attr(data-old);

        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;

        -webkit-transform: translate3d(0, 0, 0) rotateX(0);
        -moz-transform: translate3d(0, 0, 0) rotateX(0);
        -ms-transform: translate3d(0, 0, 0) rotateX(0);
        transform: translate3d(0, 0, 0) rotateX(0);
    }

    .clock span:after {
        opacity: 0;
        z-index: 2;
        content: attr(data-now);

        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        transform-origin: 0 100%;

        -webkit-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        -moz-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        -ms-transform: translate3d(0, -102.5%, 0) rotateX(90deg);
        transform: translate3d(0, -102.5%, 0) rotateX(90deg);
    }

    .clock .flip:before {
        opacity: 0;
        -webkit-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        -moz-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        -ms-transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
        transform: translate3d(0, 102.5%, 0) rotateX(-90deg);
    }

    .clock .flip:after {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) rotateX(0);
        -moz-transform: translate3d(0, 0, 0) rotateX(0);
        -ms-transform: translate3d(0, 0, 0) rotateX(0);
        transform: translate3d(0, 0, 0) rotateX(0);
    }

    /* end Jam */

    #running_text {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        font-family: 'Lexend Deca', sans-serif;
        font-size: 1.5rem;
        color: #00AAD4;
        border-radius: 10px;
        /* border: solid #00AAD4; */
        /* background-color: darkkhaki; */
        height: 6vh;
        padding: 0 1% 0 1%;
        margin: 54.5vh 0 0 0;
        display: flex;
        align-items: center;
    }

    #footer {
        /* background-color: aquamarine; */
        height: 5vh;
        padding: 0%;
        margin: 0 2.5% 0 2.5%;
    }

    #judul1 {
        font-size: 3.5vw;
        font-family: 'Lexend Deca', sans-serif;
    }

    #judul2 {
        font-size: 1.5vw;
        font-family: 'Lexend Deca', sans-serif;
    }


    #wrapper_footer {
        align-content: center;
        margin: 0 auto;
        display: flex;
        width: 100%;
        text-align: center;
    }

    .link {
        background-color: rgb(0, 55, 100);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 0%;
        /* margin: 2px 2px 0 2px; */
        margin: -1vh auto 0 auto;
        /*background-color: #00AAD4;*/
        width: 15vw;
        height: 1.5vh;
        border-radius: 10px;
        font-size: 1vw;
        font-family: 'Lexend Deca', sans-serif;
        text-align: left;
        display: inline-block;
        /* display: flex; */
        /* align-items: center; */
    }

    .middle {
        /* background-color: teal; */
        margin: 0 auto;
        text-align: center;
        color: white;
        /* display: flex; */
    }


    #tr {
        height: 40px;
    }

    #th {
        font-size: 2vw;
        text-align: center;
    }

    #td {
        font-size: 2.2vw;
        text-align: center;
    }

    .fa {
        border-radius: 7.5px;
        padding: 10px;
        font-size: 30px;
        width: 45px;
        text-align: center;
        text-decoration: none;
        /* margin: 5px 2px; */
    }

    .fa:hover {
        /* opacity: 0.7; */
        transform: scale(1.15);
        transition: .3s ease-in-out;
        background-color: white;
    }

    .fa-facebook {
        background: #3b5998;
        color: white;
    }

    .fa-twitter {
        background: #55acee;
        color: white;
    }

    .fa-globe {
        background: #dd4b39;
        color: white;
    }

    .fa-youtube {
        background: #bb0000;
        color: white;
    }

    .fa-instagram {
        background: #125688;
        color: white;
    }

}