#parentpopup{
        background-color: rgb(117, 117, 117);
        color: white;
        position: absolute;
        top: 75px;
        float: right;
        right: 5px;
    
        width: 21%;
        height: 45vh;
    

    
        z-index: 2;
    }
    
    .closepopup{
        background-color: red;
        position: absolute;
        right: 0px;
        padding: 5px;
    }
    
    .isipopup{
        width: 100%;
    }
    
    .isipopup .img-popup{
        width: 50%;
        margin-left: 5px;
        margin-top: 5px;
    }
    
    .isipopup .judulpopup{
        margin-top: -5px;
        margin-left: 10px;
        width: 100%;
        font-size: 18px;
        font-weight: bold;
    }
    
    .judulpopup .judul-link{
        color: white; border: 1px solid orange; padding: 10px; border-radius: 10px; background-color: orange; margin-left: 35px;
    }
    
    .judulpopup .judul-link:hover{
        background-color: rgb(43, 255, 0);
    }
    
    
    .judulpopup img{
        width: 60%;
        margin-left: 40px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    
    /* ===================================================================== */
    
    #popup1{
        background-color: rgb(117, 117, 117);
        color: white;
        position: absolute;
        top: 75px;
        left: 5px;
    
        width: 21%;
        height: 88vh;
    
    
        z-index: 2;
    
    }
    
    #popup1 h1{
        color: white;
        font-size: 15px;
        margin-top: 0px;
        margin-left: 10px;
    }
    
    #popup1 ul{
        color: white;
        margin-left: 30px;
    }
    
    #popup1 ul li a{
        color: white;
        font-size: 15px;
    }
    
    #popup1 ul li a:hover{
        color: rgb(64, 255, 0);
    }
    
    #popup1 h2{
        color: white;
        font-size: 15px;
        margin-top: 0px;
        margin-left: 10px;
    }
    
    #popup1 h2 a{
        color: rgb(0, 255, 0);
    }
    
    /* ============================================= */
    
    #popup2{
        background-color: rgb(117, 117, 117);
        color: white;
        position: absolute;
        top: 410px;
        right: 5px;
    
        width: 21%;
        height: 42vh;
    
    
        z-index: 2;
    
    }
    
    #popup2 h1{
        color: white;
        font-size: 15px;
        margin-top: 0px;
        margin-left: 10px;
    }
    
    #popup2 ul{
        color: white;
        margin-left: 30px;
    }
    
    #popup2 ul li a{
        color: white;
        font-size: 15px;
    }
    
    #popup2 ul li a:hover{
        color: rgb(64, 255, 0);
    }
  
    #parentpopup2{
        display: none;
    }

    #popup12{
        display: none;
    }

    #popup22{
        display: none;
    }
    






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

    #parentpopup{
        display: none;
    }
    #popup1{
        display: none;
    }

    #popup2{
        display: none;
    }

    #parentpopup2{
        display: block;
    }

    #popup12{
        display: block;
    }

    #popup22{
        display: block;
    }

/* =================================================================== */

    #parentpopup2{
        background-color: rgb(117, 117, 117);
        color: white;
        height: 250px;
        width: 100%;
    }

    
    .isipopup2{
        width: 100%;
    }
    
    .isipopup2 .judulpopup2{
        margin-top: -5px;
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    
    .judulpopup2 .judul-link2{
        color: white;
        border: 1px solid orange; 
        padding: 10px; 
        border-radius: 10px; 
        background-color: orange; 
    }
    
    .judulpopup2 .judul-link2:hover{
        background-color: rgb(43, 255, 0);
    }
    
    
    .judulpopup2 img{
        width: 30%;
        height: 100px;
        margin-left: 0px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    /* ===================================================================== */

    #popup22{
        background-color: rgb(117, 117, 117);
        color: white;
        position: static;

        margin-top: 10px;
        width: 100%;
        height: 42vh;
    
    
        z-index: 2;
    
    }
    
    #popup22 h1{
        color: white;
        font-size: 15px;
        margin-top: 0px;
        margin-left: 10px;
    }
    
    #popup22 ul{
        color: white;
        margin-left: 30px;
    }
    
    #popup22 ul li a{
        color: white;
        font-size: 15px;
    }
    
    #popup22 ul li a:hover{
        color: rgb(64, 255, 0);
    }

    /* ===================================================================== */

    #popup12{
        background-color: rgb(117, 117, 117);
        color: white;
        position: static;

        margin-top: 10px;
        width: 100%;
        height: 70vh;
    
    
        z-index: 2;
    
    }
    
    #popup12 h1{
        color: white;
        font-size: 15px;
        margin-top: 0px;
        margin-left: 10px;
    }
    
    #popup12 ul{
        color: white;
        margin-left: 30px;
    }
    
    #popup12 ul li a{
        color: white;
        font-size: 15px;
    }
    
    #popup12 ul li a:hover{
        color: rgb(64, 255, 0);
    }
    
    #popup12 h2{
        color: white;
        font-size: 15px;
        margin-top: 0px;
        margin-left: 10px;
    }
    
    #popup12 h2 a{
        color: rgb(0, 255, 0);
    }

    
    /* ===================================================================== */
    
    
    
    /* ============================================= */
    
    
  }