@media (max-width: 767px) {
    header, .illustration {
        display: none;
    }
    .w-50 {
        width: 100%;
    }
    #background-pic {
        margin-top: 0px;
    }
    .separation-beige {
        top: -16px;
    }
    .submit-container img {
        width: 90%;
        margin-top: 20px;
    }
    .submit-container {
        text-align: center;
        width: 100%;
        margin-left: 0px;
        padding-left: 0px;
    }
    .footer-desktop, #button-to-top, #tablet-menu {
        display: none !important;
    }
    .footer-mobile {
        display: block !important;
    }
    footer {
        margin-bottom: 100px;
    }
    .menu-mobile {
        display: block !important;
        position: relative;
    }
    #menu-mobile {
        display: block;
        width: 100%;
        position: fixed;
        bottom: -22px;
    }
    .menu-bottom {
        width: 80%;
        position: fixed;
        z-index: 2;
        bottom: -30px;
        padding-left: 10%;
    }
    .menu-bottom div {
        width: 20%;
        margin-right: 5px;
    }
    .menu-bottom img {
        width: 100%;
        margin-bottom: 40px;
    }
    #reina-top {
        position: absolute;
        top: 0;
    }
    .separation-beige {
        top: -9px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #menu {
        display: none !important;
    }
    #tablet-menu {
        display: flex !important;
        position: absolute;
        top: 58px;
        left: 66px;
    }
    #tablet-menu div {
        width: 20%;
    }
    #tablet-menu img {
        width: 48%;
    }
    #button-to-top {
        width: 8%;
    }
    .separation-beige {
        top: -25px;
    }
}

@media (min-width: 1025px) {
    /* The separator image scales with viewport width, so its offset must
       scale too (in vw) instead of a fixed px value, or it drifts out of
       place on very large/ultra-wide screens. */
    .separation-beige {
        top: -4.03vw;
    }
    footer .separation-beige {
        top: -0.69vw;
    }
}