/* =========================================
   KLIMAATIMPACT DROPDOWN MENU
========================================= */

.hex-wrapper{
    position:relative;
}

.klimaatimpact-menu{

    display:none;

    position:absolute;

    top:130px;

    left:50%;

    transform:translateX(-50%);

    width:320px;

    z-index:9999;

    background:
        linear-gradient(
            180deg,
            #1f2937,
            #111827
        );

    border:1px solid rgba(
        0,
        234,
        255,
        .30
    );

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 0 25px rgba(
            0,
            234,
            255,
            .25
        );

    animation:menuFade .4s ease;
}

/* =========================================
   MENU ITEMS
========================================= */

.impact-item{

    padding:18px 25px;

    color:white;

    font-size:18px;

    cursor:pointer;

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            .06
        );

    transition:.3s;
}

.impact-item:last-child{
    border-bottom:none;
}

.impact-item:hover{

    background:
        rgba(
            0,
            234,
            255,
            .15
        );

    transform:
        translateX(8px);

    text-shadow:
        0 0 10px #00eaff;

    box-shadow:
        inset 4px 0 0 #00eaff;
}

/* =========================================
   ANIMATIE
========================================= */

@keyframes menuFade{

    from{
        opacity:0;
        transform:
            translateX(-50%)
            translateY(-15px);
    }

    to{
        opacity:1;
        transform:
            translateX(-50%)
            translateY(0);
    }
}

/* =========================================
   MOBIEL
========================================= */

@media (max-width:768px){

    .klimaatimpact-menu{

        width:280px;

        top:110px;
    }

    .impact-item{

        font-size:16px;
        padding:15px 20px;
    }
}