/* Mobile landscape */
@media (min-width: 375px) and (max-width: 767px) and (orientation: landscape) {
    .block-ui__wrapper {
        display: block;
        /*
        However, here is some extra snacks for you.
        To align everything in center.
        */
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
}

/* Mobile portrait */
@media (max-width: 767px) and (orientation: portrait) {
    html {
        overflow: hidden;
    }

    header {
        height: 25%;
        justify-content: center;
    }

    header .hex-logo {
        width: 100%;
        height: 90%;
    }

    .hex-logo a {
        justify-content: center;
    }
    
    .hex-guestroom-page {
        flex-direction: column;
        height: auto !important;
        padding-top: 5%;
        overflow: hidden;
    }

    .hex-working-page {
        position: relative;
        height: 100%;
        overflow: visible;
    }

    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .hex-guestroom-lookingfor {
        margin-left: 0;
        text-align: center;
    }

    .hex-guestroom-menu {
        width: 100%;
        padding-left: 25%;
    }

    .hex-guestroom-section:nth-of-type(3) {
        min-height: 420px;
    }

    .border {
        min-height: 200px;
        max-height: 200px;
    }

    .hex-logo img {
        max-width: 85%;
    }

    .hex-going-deeper {
        padding-top: 0;
        padding-left: 0;
    }

    object {
        width: 90% !important;
    }

    .hex-socials {
        padding-left: 0;
    }

    footer {
        height: 5em;
    }

    .footer {
        overflow: visible;
        background: transparent;
    }

    .mobile {
        display: block;
    }
    
    .hex-landing-title {
        bottom: -1.5em;
        font-size: 0.7em;
    }

    .hex-guestroom-welcome {
        font-size: 1.8em;
    }

    .hex-guestroom-navigation {
        bottom: 7em !important;
    }

    .hex-guestroom-section {
        min-width: 100%;
        height: auto;
        min-height: auto;
    }
}