*,::after,::before {
  box-sizing: border-box;
}
        .hamburg {
            position: absolute;
            width: 80px;
            height: 80px;
            padding: .6rem;
            background-image: url(https://antibocor.xyz/images/menucnntombol.gif);
            border-radius: 10px;
            z-index: 80;
            box-shadow: 0px 0px 12px 1px rgba(233 228 222 / 70%);
        }

        .ard-sosmed {
            display: block;
            cursor: pointer;
            position: fixed;
            bottom: 275px;
            left: 10px;
            font-family: "Times New Roman", sans-serif;
            z-index: 999;
        }

        .ard-sosmed ul {
            margin: 0;
            padding: 0;
        }

        .ard-sosmed ul li {
            position: absolute;
            text-decoration: none;
            list-style: none;
            transform: translate(0, 0) rotate(360deg);
            transition: all .5s ease;
            opacity: 0;
        }

        .ard-sosmed.open ul li:nth-child(1) {
            transform: translateY(-130px);
            transition-delay: .36s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(2) {
            transform: translate(0px, -65px);
            transition-delay: .32s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(3) {
            transform: translate(0px, -195px);
            transition-delay: .28s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(4) {
            transform: translate(0px, -260px);
            transition-delay: .24s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(5) {
            transform: translate(0px, -325px);
            transition-delay: .20s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(6) {
            transform: translate(60px, -65px);
            transition-delay: .16s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(7) {
            transform: translate(60px, -130px);
            transition-delay: .12s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(8) {
            transform: translate(60px, -195px);
            transition-delay: .08s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(9) {
            transform: translate(60px, -260px);
            transition-delay: .04s;
            opacity: 1;
        }

        .ard-sosmed.open ul li:nth-child(10) {
            transform: translate(60px, -325px);
            transition-delay: .04s;
            opacity: 1;
        }

        .ard-sosmed ul li a img {
            width: 100%;
            height: auto;
        }

        .ard-sosmed ul li a {
            display: flex;
            width: 55px;
            height: 55px;
            border: solid 2px var(--base-color);
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            background-color: #000000;
        }

        .bar1,
        .bar2,
        .bar3 {
            width: 70%;
            height: 5px;
            background-color: #ffffff;
            margin: 6px auto;
            transition: .4s;
            position: relative;
            transform: translateY(-1px);
        }

        .open .bar1 {
            transform: translate(0, 10px) rotate(-225deg);
        }

        .open .bar2 {
            opacity: 0;
            transform: translate(0, -6px) rotate(-225deg);
        }

        .open .bar3 {
            transform: translate(0, -12px) rotate(-315deg);
        }


        .ard-sosmed ul li div {
            position: absolute;
            transition: all .3s ease;
            opacity: 0;
            scale: .1;
            font-family: "Times New Roman", sans-serif;
            font-size: large;
            background: rgba(0, 0, 0, 1);
            color: #ffffff;
            text-align: center;
            text-wrap: nowrap;
            border: 1px solid var(--base-color);
            padding: 5px;
            border-radius: 10px;
        }

        .ard-sosmed ul li:hover div {
            opacity: 1;
            scale: 1;
        }

        .ard-sosmed ul li:nth-child(1) div {
            transform: translateY(-130px);
        }

        .ard-sosmed ul li:nth-child(1):hover div {
            transform: translate(70px, -40px);
        }

        .ard-sosmed ul li:nth-child(2) div {
            transform: translateY(-130px);
        }

        .ard-sosmed ul li:nth-child(2):hover div {
            transform: translate(70px, -40px);
        }

        .ard-sosmed ul li:nth-child(3) div {
            transform: translateY(-130px);
        }

        .ard-sosmed ul li:nth-child(3):hover div {
            transform: translate(70px, -40px);
        }

        .ard-sosmed ul li:nth-child(4) div {
            transform: translateY(-130px);
        }

        .ard-sosmed ul li:nth-child(4):hover div {
            transform: translate(70px, -40px);
        }

        .ard-sosmed ul li:nth-child(5) div {
            transform: translateY(-130px);
        }

        .ard-sosmed ul li:nth-child(5):hover div {
            transform: translate(70px, -40px);
        }

        .ard-sosmed ul li:nth-child(6) div {
            transform: translateY(-130px);
        }

        .ard-sosmed ul li:nth-child(6):hover div {
            transform: translate(70px, -40px);
        }

        .attention {
            position: relative;
            -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
            width: 80px;
            text-wrap: nowrap;
            height: 30px;
            margin-bottom: 5px;
            left: 15px;
            background-color: var(--base-color);
            cursor: default;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 10px;
            opacity: 0;
        }

        .whore {
            animation: flicker .6s infinite;

            &:hover {
                animation-duration: 10s;
            }
        }

        @keyframes flicker {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @media screen and (max-width: 600px) {
            .ard-sosmed {
                bottom: 275px;
                left: 10px;
            }
        }

      

.c-circle-nav__link {
    /* display: block; */
    /* width: 100%; */
    /* height: 100%; */
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #d12203;
}

@media(min-width: 480px) and (min-height:480px) {
    .c-circle-nav.is-active .c-circle-nav__item:nth-child(5) {
        -webkit-transform:translate(0,-298px);
        transform: translate(0,-298px)
    }

    .c-circle-nav__link {
        border-radius: 10px;
    }
}

.c-circle-nav__link img {
    display: block;
    max-width: 90%;
    height: auto;
}

.c-circle-nav__link:hover {
    box-shadow: inset 0 0 0 2px #ffffff
}