
@media only screen and (max-width: 768px) {

    /*Hide images*/
    .jumbotron{
        display: none;
    }

    #anima{
        margin: 5px auto;
        width: 250px;
        height: 360px;
        margin-top: 100px;
    }

    #central{
        width: 150px;
        height: 150px;
        position: absolute;
        margin: 30px 10px;
        z-index: 1;
    }

    #central img{
        width: 250px;
        transition: all .4s ease-in-out;
        border-radius: 50%;
    }

    .link{
        position: absolute;
        margin: 105px 100px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        transition: all .1s ease-out;
        z-index: 0;
    }

    .link1{
        position: absolute;
        margin: 105px 82px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        transition: all .1s ease-out;
    }

    #check:checked ~ a #tombol_01{
        transform: translate(-165px, -35px );
        transition-delay: .1s;
        z-index: 1;
    }

    #check:checked ~ a #tombol_02{
        transform: translate(88px, -118px);
        transition-delay: .2s;
        z-index: 1;
    }

    #check:checked ~ a #tombol_03{
        transform: translate(31px, 150px);
        transition-delay: .3s;
        z-index: 1;
    }

    #check:checked ~ a #tombol_04{
        transform: translate( -8px, -15px);
        z-index: 1;
    }

    #check:checked ~  #central img{
        transform: rotate(-45deg);
    }
}
