body {
            font-family: Arial, Helvetica, sans-serif;
        }

        @media (max-width: 650px) {
            .rj {
                display: none;
            }

            .dj {
                float: none;
                margin: 0 auto;
            }
        }

        @media (min-width: 650px) and (max-width:2000px) {
            .dj {
                float: left;
            }
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 999; /* Sit on top */
            /* padding-top: 200px;*/ /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            /*min-width: 150px;*/
            width: 100%;
            height: 100%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 35px;
            font-weight: bold;
        }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

            
#wrapper{
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgb(243, 242, 240);
}

#container{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.first{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 transform: translateY(40px);
 gap: 1px;
}


.second{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
   }


   .third{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
    justify-content: center;
    transform: translateY(-40px);
   }

.hexa {
    height: 190px;
    width: 170px;
   
    background: #0098c2;
    clip-path: polygon(48% 0, 100% 24%, 100% 79%, 51% 100%, 1% 79%, 0 24%);
    background-image: url(../img/hexa/hexaIcon.png);
    background-size: cover;
}


.hexa1 {
    height: 190px;
    width: 170px;
   
    background: #0098c2;
    clip-path: polygon(48% 0, 100% 24%, 100% 79%, 51% 100%, 1% 79%, 0 24%);
    background-image: url(../img/hexa/hexaIcon-1.png);
    background-size: cover;
}
.hexa2 {
    height: 190px;
    width: 170px;
   
    background: #0098c2;
    clip-path: polygon(48% 0, 100% 24%, 100% 79%, 51% 100%, 1% 79%, 0 24%);
    background-image: url(../img/hexa/hexaIcon-2.png);
    background-size: cover;
}
.hexa3 {
    height: 190px;
    width: 170px;
   
    background: #0098c2;
    clip-path: polygon(50% 0, 100% 22%, 100% 79%, 51% 100%, 1% 79%, 0 24%);
    background-image: url(../img/hexa/hexaIcon-3.png);
    background-size: cover;
}
.hexa4 {
    height: 190px;
    width: 170px;
   
    background: #0098c2;
    clip-path: polygon(50% 0, 100% 21%, 100% 78%, 51% 100%, 1% 79%, 0 22%);
    background-image: url(../img/hexa/hexaIcon-4.png);
    background-size: cover;
    margin-top: 2px;
}
.hexa5 {
    height: 190px;
    width: 170px;
 
    background: #0098c2;
    clip-path: polygon(51% 0, 100% 24%, 100% 79%, 50% 100%, 1% 79%, 0 22%);
    background-image: url(../img/hexa/hexaIcon-5.png);
    background-size: cover;
}
.hexa6 {
    height: 190px;
    width: 170px;
  
    background: #0098c2;
    clip-path: polygon(50% 0, 100% 21%, 100% 79%, 51% 100%, 1% 79%, 0 21%);
    background-image: url(../img/hexa/hexaIcon-6.png);
    background-size: cover;
    margin-top:2px;
}
.hexa7 {
    height: 190px;
    width: 170px;
   
    background: #0098c2;
    clip-path: polygon(50% 0, 100% 21%, 100% 79%, 51% 100%, 1% 79%, 0 22%);
    background-image: url(../img/hexa/hexaIcon-7.png);
    background-size: cover;
    margin-top: 1px;
}

.hexa8 {
    height: 190px;
    width: 170px;
    background: #0098c2;
    clip-path: polygon(49% 0, 100% 20%, 100% 78%, 49% 100%, 1% 78%, 0 22%);
    background-image: url(../img/Tiket.png);
    background-size: cover;
    margin-top: 1px;
}
.hexa9{
    height: 190px;
    width: 170px;
    background: #0098c2;
    clip-path: polygon(50% 0, 100% 21%, 100% 79%, 51% 100%, 1% 79%, 0 22%);
    background-image: url(../img/Tiket.png);
    background-size: cover;
    margin-top: 1px;
}
.desk-hidden{
display: none;
}

@media screen and (max-width: 767px) {
    .hidden{
    display: none;
    }

  .hexa{
    height: 160px;
    width: 160px;
}
    .hexa1 {
        height: 160px;
        width: 160px;
    }

    .hexa2 {
        height: 160px;
        width: 160px;
    }


    .hexa3 {
        height: 160px;
        width: 160px;
    }


    .hexa4 {
        height: 160px;
        width: 160px;
    }

    .hexa5 {
        height: 160px;
        width: 160px;
    }

    .hexa6 {
        height: 160px;
        width: 160px;
    }

    .hexa7 {
        height: 160px;
        width: 160px;
    }
    .hexa8 {
        height: 160px;
        width: 160px;
    }
    .hexa9 {
        height: 160px;
        width: 160px;
    }
.desk-hidden{
  display: block;
  transform: translateY(25px);
}

.first{
 transform: translateY(0px);
}
    .second {
        transform: translateY(-34px);
    }

    .third {
        transform: translateY(-68px);
    }
    .fifth {
        transform: translateY(-69px);
    }
}