@media screen and (max-width: 480px) {

    div#mobileWrapper {
        visibility: visible;
    }

    article h1 {
        font-size: 8rem;
    }

    /* ------- POPUP CHANGES ------- */

    div#popup {
        padding: 1vh 4vw;
        padding-right: calc(4vw + 32px);
        background: transparent;
    }

    .popupWrapper {
        padding: 30px 0px;
        box-sizing: border-box;
        display: block;
        overflow-y: auto;
        background: white;
        border: solid #111;
        border-left-width: 1px;
        border-top-width: 1px;
        border-right-width: 3px;
        border-bottom-width: 4px;
        position: relative;
        box-shadow: none;
    }

    .popupWrapper::before {
        width: 32px;
        height: 32px;
        top: 5px;
        right: 5px;
        filter: invert(0);
        opacity: 1;
    }

    .popupWrapper>* {
        display: block;
        margin: 0 auto;
        padding: 0px 0px;
    }

    .popupWrapper .fronteiras {
        padding: 5rem 0rem;
        width: 50%;
    }

    .popupWrapper article {
        padding-right: 6rem !important;
        padding-left: 6rem !important;
        margin: 0px;
        width: 100%;
        box-sizing: border-box;
    }
}

#mobileWrapper {
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #eee;
    z-index: 500;
    transition: filter .3s ease;
}

.menuWrapper ul {
    padding: 0px;
    margin: 0px;
}

.menuWrapper ul>li {
    display: table;
    width: 100%;
    border-bottom: 1px solid #cfcfcf;
    cursor: pointer;
}

.menuWrapper ul>li:hover {
    background: white;
}

.menuWrapper ul>li * {
    height: 64px;
    box-sizing: border-box;
    display: table-cell;
}

.menuWrapper ul>li span {
    font-family: 'Inter Tight', 'Roboto', sans-serif;
    width: 100%;
    vertical-align: middle;
    padding-left: 4px;
}

.menuWrapper ul>li img {
    width: 96px;
    object-fit: scale-down;
    padding: 7px 10px;
}