.aside-nav { position: fixed; right: -80px; top: -110px; width: 220px; height: 220px; -webkit-filter: url(#goo); filter: url(#goo); -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; pointer-events: none; }

    .aside-nav.active { pointer-events: initial; }

    .aside-nav.no-filter { -webkit-filter: none; filter: none }

    .aside-nav .aside-menu { position: absolute; width: 60px; height: 60px; -webkit-border-radius: 50%; border-radius: 50%; background: #4285f4; left: 0; top: 0; right: 0; bottom: 0; margin: auto; text-align: center; line-height: 60px; color: #fff; font-size: 20px; z-index: 1; border: none; pointer-events: initial; }

        .aside-nav .aside-menu .fa-close { display: none; }

    .aside-nav.active .aside-menu .fa-arrow-right { display: none; }

    .aside-nav.active .aside-menu .fa-arrow-down { display: none; }

    .aside-nav .aside-menu .fa-arrow-down { display: none; }

    .aside-nav.active .aside-menu .fa-close { display: inline-block; }

    .aside-nav .menu-item { position: absolute; width: 60px; height: 60px; background-color: #4285f4; left: 0; top: 0; right: 0; bottom: 0; margin: auto; line-height: 60px; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; text-decoration: none; color: #fff; -webkit-transition: background .5s, -webkit-transform .6s; transition: background .5s, -webkit-transform .6s; -moz-transition: transform .6s, background .5s, -moz-transform .6s; transition: transform .6s, background .5s; transition: transform .6s, background .5s, -webkit-transform .6s, -moz-transform .6s; font-size: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; }

        .aside-nav .menu-item:hover { background: red; }

    .aside-nav .menu-line { line-height: 20px; padding-top: 10px; }

    .aside-nav.active .aside-menu { -webkit-animation: jello 1s; -moz-animation: jello 1s; animation: jello 1s }

    .aside-nav.active .menu-first { -webkit-transform: translate3d(-135%, 0, 0); -moz-transform: translate3d(-135%, 0, 0); transform: translate3d(-135%, 0, 0); }

    .aside-nav.active .menu-second { -webkit-transform: translate3d(0, -135%, 0); -moz-transform: translate3d(0, -135%, 0); transform: translate3d(0, -135%, 0); }

    .aside-nav.active .menu-third { -webkit-transform: translate3d(135%, 0, 0); -moz-transform: translate3d(135%, 0, 0); transform: translate3d(135%, 0, 0); }


    .aside-nav.active .menu-four { -webkit-transform: translate3d(0, 135%, 0); -moz-transform: translate3d(0, 135%, 0); transform: translate3d(0, 135%, 0); }

@-webkit-keyframes jello {
    from, 11.1%, to { -webkit-transform: none; transform: none }

    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }

    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }

    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }

    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }

    66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }

    77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }

    88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}

@-moz-keyframes jello {
    from, 11.1%, to { -moz-transform: none; transform: none }

    22.2% { -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }

    33.3% { -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }

    44.4% { -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }

    55.5% { -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }

    66.6% { -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }

    77.7% { -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }

    88.8% { -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}

@keyframes jello {
    from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none }

    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }

    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }

    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }

    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }

    66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }

    77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }

    88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}

.animated { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both }

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1) }

    from { opacity: 0; -webkit-transform: translate3d(0, 800px, 0); transform: translate3d(0, 800px, 0) }

    60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) }

    75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) }

    90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) }

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

@-moz-keyframes bounceInUp {
    from, 60%, 75%, 90%, to { -moz-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1) }

    from { opacity: 0; -moz-transform: translate3d(0, 800px, 0); transform: translate3d(0, 800px, 0) }

    60% { opacity: 1; -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) }

    75% { -moz-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) }

    90% { -moz-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) }

    to { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -moz-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1) }

    from { opacity: 0; -webkit-transform: translate3d(0, 800px, 0); -moz-transform: translate3d(0, 800px, 0); transform: translate3d(0, 800px, 0) }

    60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) }

    75% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) }

    90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) }

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

.bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; animation-name: bounceInUp; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s }

@media(max-width: 1023px) {
    .aside-nav { right: -110px; top: -115px; }

        .aside-nav .aside-menu .fa-arrow-right { display: none; }

        .aside-nav .aside-menu .fa-arrow-down { display: inline; }
}