@media (min-width:768px) {
    /* prevent text rendering degrade during animation in Mac browsers */
    body header#header #menu {
        -webkit-font-smoothing: subpixel-antialiased;
    }
        /* show animation */
        body header#header #menu ul.show-animation {
            -webkit-animation: show-animation 0.2s;
            -moz-animation: show-animation 0.2s;
            -o-animation: show-animation 0.2s;
            animation: show-animation 0.2s;
        }

    @-webkit-keyframes show-animation {
        0% {
            -webkit-transform: scale3d(0, 0, 1);
            -moz-transform: scale3d(0, 0, 1);
            -ms-transform: scale3d(0, 0, 1);
            -o-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
            opacity: 0;
        }

        60% {
            -webkit-transform: scale3d(1.05, 1.05, 1);
            -moz-transform: scale3d(1.05, 1.05, 1);
            -ms-transform: scale3d(1.05, 1.05, 1);
            -o-transform: scale3d(1.05, 1.05, 1);
            transform: scale3d(1.05, 1.05, 1);
        }

        100% {
            -webkit-transform: scale3d(1, 1, 1);
            -moz-transform: scale3d(1, 1, 1);
            -ms-transform: scale3d(1, 1, 1);
            -o-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }
    }

    @-moz-keyframes show-animation {
        0% {
            -moz-transform: scale3d(0, 0, 1);
            -ms-transform: scale3d(0, 0, 1);
            -o-transform: scale3d(0, 0, 1);
            -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
            opacity: 0;
        }

        60% {
            -moz-transform: scale3d(1.05, 1.05, 1);
            -ms-transform: scale3d(1.05, 1.05, 1);
            -o-transform: scale3d(1.05, 1.05, 1);
            -webkit-transform: scale3d(1.05, 1.05, 1);
            transform: scale3d(1.05, 1.05, 1);
        }

        100% {
            -moz-transform: scale3d(1, 1, 1);
            -ms-transform: scale3d(1, 1, 1);
            -o-transform: scale3d(1, 1, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }
    }

    @keyframes show-animation {
        0% {
            -moz-transform: scale3d(0, 0, 1);
            -ms-transform: scale3d(0, 0, 1);
            -o-transform: scale3d(0, 0, 1);
            -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
            opacity: 0;
        }

        60% {
            -moz-transform: scale3d(1.05, 1.05, 1);
            -ms-transform: scale3d(1.05, 1.05, 1);
            -o-transform: scale3d(1.05, 1.05, 1);
            -webkit-transform: scale3d(1.05, 1.05, 1);
            transform: scale3d(1.05, 1.05, 1);
        }

        100% {
            -moz-transform: scale3d(1, 1, 1);
            -ms-transform: scale3d(1, 1, 1);
            -o-transform: scale3d(1, 1, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }
    }
    /* hide animation */
    body header#header #menu ul.hide-animation {
        -webkit-animation: hide-animation 0.2s;
        -moz-animation: hide-animation 0.2s;
        -o-animation: hide-animation 0.2s;
        animation: hide-animation 0.2s;
    }

    @-webkit-keyframes hide-animation {
        0% {
            -webkit-transform: scale3d(1, 1, 1);
            -moz-transform: scale3d(1, 1, 1);
            -ms-transform: scale3d(1, 1, 1);
            -o-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale3d(0, 0, 1);
            -moz-transform: scale3d(0, 0, 1);
            -ms-transform: scale3d(0, 0, 1);
            -o-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
            opacity: 0;
        }
    }
    @-moz-keyframes hide-animation {
        0% {
            -moz-transform: scale3d(1, 1, 1);
            -ms-transform: scale3d(1, 1, 1);
            -o-transform: scale3d(1, 1, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }

        100% {
            -moz-transform: scale3d(0, 0, 1);
            -ms-transform: scale3d(0, 0, 1);
            -o-transform: scale3d(0, 0, 1);
            -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
            opacity: 0;
        }
    }
    @keyframes hide-animation {
        0% {
            -moz-transform: scale3d(1, 1, 1);
            -ms-transform: scale3d(1, 1, 1);
            -o-transform: scale3d(1, 1, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }

        100% {
            -moz-transform: scale3d(0, 0, 1);
            -ms-transform: scale3d(0, 0, 1);
            -o-transform: scale3d(0, 0, 1);
            -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
            opacity: 0;
        }
    }
}