.context-menu {
    display: none;
    position: absolute;
    z-index: 10;
}

.context-menu-container {
    display: none;
    padding: 12px;
    width: 240px;
    border-radius: 3px;
    background-color: #fff;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: contextMenuFlipInX;
    animation-name: contextMenuFlipInX;
}

body:not(.dev) .context-menu.active,
body:not(.dev) .context-menu.active .context-menu-container{
    display: block;
}

@-webkit-keyframes contextMenuFlipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    95% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes contextMenuFlipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    95% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.context-menu .width-full {
    width: 100%;
}

.context-menu a {
    text-decoration: none;
    color: black;
    display: block;
}