@media only screen and ((pointer: coarse) and (hover: none)),
only screen and (max-width: 768px),
only screen and (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {

    /* Menu button */
    button.buttonMenu {
        position: fixed;
        display: block;
        top: 3%;
        right: 2%;
        padding: 0;
        z-index: 15;
        border: none;
        cursor: pointer;
        width: min(5vw, 60px);
        height: min(5vw, 60px);
        background: transparent;
    }

    button.buttonMenu span {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        width: 70%;
        border-radius: 2px;
        height: min(0.45vw, 4px);
        transform-origin: center;
        background-color: var(--almost-black);
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    /* Estado inicial: hambúrguer */
    button.buttonMenu span:nth-of-type(1) {
        transform: translate(-50%, calc(-50% - 1vw));
    }

    button.buttonMenu span:nth-of-type(2) {
        transform: translate(-50%, -50%);
    }

    button.buttonMenu span:nth-of-type(3) {
        transform: translate(-50%, calc(-50% + 1vw));
    }

    /* Estado "X" (quando .close é adicionado) */
    button.buttonMenu.close span {
        background-color: var(--white);
    }

    button.buttonMenu.close span:nth-of-type(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    button.buttonMenu.close span:nth-of-type(2) {
        opacity: 0;
    }

    button.buttonMenu.close span:nth-of-type(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Menu nav and ul */
    .main-nav,
    ul#nav-list li .circle {
        display: none;
    }

    .main-nav {
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        right: unset;
        transform: none;
        background-color: rgba(0, 0, 0, .88);
    }

    ul#nav-list li,
    ul#nav-list li a {
        justify-content: center;
        font-size: 2.5vw;
        text-align: center;
        color: var(--white);
        margin-bottom: 1.9vw;
    }

    ul#nav-list li:last-child,
    ul#nav-list li:last-child a {
        margin-bottom: 0;
    }

    ul#nav-list li a:hover,
    ul#nav-list li.active a {
        color: var(--white);
    }
}

/* MOBILE - Portrait */
@media only screen and (max-width: 768px) and (orientation: portrait) {

    /* Menu button */
    button.buttonMenu {
        position: absolute;
        top: 1.5%;
        right: 2.5%;
        width: min(8vw, 60px);
        height: min(8vw, 60px);
    }

    button.buttonMenu span {
        width: 80%;
        height: min(0.77vw, 4px);
    }

    /* Estado inicial: hambúrguer */
    button.buttonMenu span:nth-of-type(1) {
        transform: translate(-50%, calc(-50% - 2vw));
    }

    button.buttonMenu span:nth-of-type(3) {
        transform: translate(-50%, calc(-50% + 2vw));
    }

    /* Menu nav and ul */
    ul#nav-list li,
    ul#nav-list li a {
        font-size: 5.2vw;
        margin-bottom: 5.5vw;
    }
}

/* MOBILE - Portrait (Tablet) */
@media only screen and (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {

    /* Menu button */
    button.buttonMenu {
        width: min(6vw, 60px);
        height: min(6vw, 60px);
    }

    /* Estado inicial: hambúrguer */
    button.buttonMenu span:nth-of-type(1) {
        transform: translate(-50%, calc(-50% - 1.5vw));
    }

    button.buttonMenu span:nth-of-type(3) {
        transform: translate(-50%, calc(-50% + 1.5vw));
    }
}