nav {
    text-align: center;
    z-index: 99;
    /*width: auto;
    min-width: 0;
    display: table;*/
}

nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    background: #5483a1;
    border-radius: 5px;
}

    nav > ul > li {
        float: left;
        width: 250px;
        height: 40px;
        line-height: 40px;
        position: relative;
        text-transform: uppercase;
        font-size: 14px;
        color: white;
        cursor: pointer;
        z-index: 1;
    }

        nav > ul > li:hover {
            background: #5483a1;
            border-radius: 5px;
        }

ul.drop-menu {
    position: absolute;
    top: 100%;
    left: 0%;
    width: 100%;
    padding: 0;
}

    ul.drop-menu li {
        background: white;
        color: #5483a1;
    }

        ul.drop-menu li:hover {
            background: #5483a1;
            color: white;
        }

        ul.drop-menu li:last-child {
            border-radius: 0px 0px 5px 5px;
        }

    ul.drop-menu li {
        display: none;
    }

li:hover > ul.drop-menu li {
    display: block;
}

li:hover > ul.drop-menu.menu-1 {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

    li:hover > ul.drop-menu.menu-1 li {
        opacity: 0;
    }

        li:hover > ul.drop-menu.menu-1 li:nth-child(1) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: -150ms;
            animation-delay: -150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(2) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(3) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 150ms;
            animation-delay: 150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(4) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(5) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 450ms;
            animation-delay: 450ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(6) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 600ms;
            animation-delay: 600ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(7) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 750ms;
            animation-delay: 750ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(8) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(9) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1050ms;
            animation-delay: 1050ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-1 li:nth-child(10) {
            -webkit-animation-name: menu1;
            animation-name: menu1;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

@-webkit-keyframes menu1 {
    0% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg) translateY(30px);
        transform: rotateY(-90deg) translateY(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateY(0deg) translateY(0px);
        transform: rotateY(0deg) translateY(0px);
    }
}

@keyframes menu1 {
    0% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg) translateY(30px);
        transform: rotateY(-90deg) translateY(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateY(0deg) translateY(0px);
        transform: rotateY(0deg) translateY(0px);
    }
}

li:hover > ul.drop-menu.menu-2 {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

    li:hover > ul.drop-menu.menu-2 li {
        opacity: 0;
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }

        li:hover > ul.drop-menu.menu-2 li:nth-child(1) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: -150ms;
            animation-delay: -150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(2) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(3) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 150ms;
            animation-delay: 150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(4) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(5) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 450ms;
            animation-delay: 450ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(6) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 600ms;
            animation-delay: 600ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(7) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 750ms;
            animation-delay: 750ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(8) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(9) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1050ms;
            animation-delay: 1050ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-2 li:nth-child(10) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        li:hover > ul.drop-menu.menu-2 li:nth-child(11) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        li:hover > ul.drop-menu.menu-2 li:nth-child(12) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        li:hover > ul.drop-menu.menu-2 li:nth-child(13) {
            -webkit-animation-name: menu2;
            animation-name: menu2;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

@-webkit-keyframes menu2 {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
    }

    60% {
        tranform: rotateX(50deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}

@keyframes menu2 {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
    }

    60% {
        tranform: rotateX(50deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}

li:hover > ul.drop-menu.menu-3 {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

    li:hover > ul.drop-menu.menu-3 li {
        opacity: 0;
    }

        li:hover > ul.drop-menu.menu-3 li:nth-child(1) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: -150ms;
            animation-delay: -150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(2) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(3) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 150ms;
            animation-delay: 150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(4) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(5) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 450ms;
            animation-delay: 450ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(6) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 600ms;
            animation-delay: 600ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(7) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 750ms;
            animation-delay: 750ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(8) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(9) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1050ms;
            animation-delay: 1050ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-3 li:nth-child(10) {
            -webkit-animation-name: menu3;
            animation-name: menu3;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

@-webkit-keyframes menu3 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3) translateY(-60px);
        transform: scale(0.3) translateY(-60px);
    }

    80% {
        -webkit-transform: scale(1.2) translateY(10px);
        transform: scale(1.2) translateY(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0px);
        transform: scale(1) translateY(0px);
    }
}

@keyframes menu3 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3) translateY(-60px);
        transform: scale(0.3) translateY(-60px);
    }

    80% {
        -webkit-transform: scale(1.2) translateY(10px);
        transform: scale(1.2) translateY(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0px);
        transform: scale(1) translateY(0px);
    }
}

li:hover > ul.drop-menu.menu-4 {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

    li:hover > ul.drop-menu.menu-4 li {
        opacity: 0;
        -webkit-transform-origin: top right;
        transform-origin: top right;
    }

        li:hover > ul.drop-menu.menu-4 li:nth-child(1) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: -150ms;
            animation-delay: -150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(2) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(3) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 150ms;
            animation-delay: 150ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(4) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(5) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 450ms;
            animation-delay: 450ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(6) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 600ms;
            animation-delay: 600ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(7) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 750ms;
            animation-delay: 750ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(8) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(9) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1050ms;
            animation-delay: 1050ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        li:hover > ul.drop-menu.menu-4 li:nth-child(10) {
            -webkit-animation-name: menu4;
            animation-name: menu4;
            -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

@-webkit-keyframes menu4 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(-30deg) translateX(30px);
        transform: rotate(-30deg) translateX(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateX(0px);
        transform: rotate(0deg) translateX(0px);
    }
}

@keyframes menu4 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(-30deg) translateX(30px);
        transform: rotate(-30deg) translateX(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateX(0px);
        transform: rotate(0deg) translateX(0px);
    }
}