@media screen and (max-width: 990px) {
    /* MENU STYLES */
    aside {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1100;
    }

    aside .toggler {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1130;
        cursor: pointer;
        width: 50px;
        height: 50px;
        opacity: 0;
    }

    aside .hamburger {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1120;
        width: 60px;
        height: 60px;
        padding: 1rem;
        background: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    /* Hamburger Line */
    aside .hamburger > div {
        position: relative;
        flex: none;
        width: 100%;
        height: 2px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }

    /* Hamburger Lines - Top & Bottom */
    aside .hamburger > div::before,
    aside .hamburger > div::after {
        content: '';
        position: absolute;
        z-index: 1200;
        top: -10px;
        width: 100%;
        height: 2px;
        background: inherit;
    }

    /* Moves Line Down */
    aside .hamburger > div::after {
        top: 10px;
    }

    /* Toggler Animation */
    aside .toggler:checked + .hamburger > div {
        transform: rotate(135deg);
    }

    /* Turns Lines Into X */
    aside .toggler:checked + .hamburger > div:before,
    aside .toggler:checked + .hamburger > div:after {
        top: 0;
        transform: rotate(90deg);
    }

    /* Rotate On Hover When Checked */
    aside .toggler:checked:hover + .hamburger > div {
        transform: rotate(225deg);
    }

    aside .toggler:checked ~ .nav-aside {
        transform: translateX(0);
    }

    aside .nav-aside {
        background: #02a6d6;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        border-radius: 0;
        padding: 70px 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: all 0.4s ease-in-out;
    }

    aside .nav-aside > h3 {
        text-align: center;
    }

    aside .nav-aside > ul > li {
        list-style: none;
        color: #000000;
        font-size: 1rem;
        padding: 1rem;
        background-color: #cde9fd;
        margin-bottom: 0.25rem;
    }

    aside .nav-aside > ul > li > a {
        text-decoration: none;
        transition: color 0.4s ease-in-out;
        padding: 0;
        color: #000000;
        width: 100%;
        margin: 0;
    }

    aside .nav-aside > ul > li > ul {
        padding-left: 10px;
        margin-top: 10px;
    }

    aside .nav-aside > ul > li > ul > li {
        font-size: 0.8rem;
    }

    aside .nav-aside > ul > li > ul > li > a {
        color: #000000;
        padding-top: 0;
        padding-bottom: 0;
    }

    aside .nav-aside ul li a.is-active {
        color: #02a6d6;
        padding: 0;
    }

    .nav-aside a:before,
    .nav-aside span:before,
    .nav-aside a:focus:after,
    .nav-aside a:hover:after,
    .nav-aside span:focus:after,
    .nav-aside span:hover:after,
    aside .nav-aside ul li a.is-active::after {
        display: none;
    }
}

@media screen and (min-width: 991px) {
    aside .hamburger,
    aside .toggler {
        display: none;
    }
}