*,::after,::before {

  box-sizing: border-box;

}

        .hamburg {

            position: absolute;

            width: 80px;

            height: 80px;

            padding: .6rem;

            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

}