/* SES Page: Home
   ===================================================================================================================== */
.page-home .main {
    min-height: 100%;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .page-home .main {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    .page-home .main {
        height: 100%;
    }
}

.page-section.intro {
    position: relative;
    z-index: 20;
}

@media (min-width: 731px) and (max-width: 1199px) {
    .page-section.intro {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
}

@media (min-width: 1200px) {
    .page-section.intro {
        position: fixed;
        top: calc(var(--space5_5) + var(--space3_5));
        max-width: calc(var(--space7) + var(--space5_5));
        left: calc(var(--headerTopHPadding) + var(--space4) + var(--space3_5));
        z-index: 20;
    }

    @media (min-width: 1600px) {
        .page-section.intro {
            left: calc(((100vw - var(--max-width)) / 2) + var(--headerTopHPadding) + var(--space4) + var(--space3_5));
        }
    }
}

.page-section.gallery {
    position: relative;
    width: 100%;
    z-index: 10;
}

@media (max-width: 730px) {
    .page-section.gallery {
        margin-top: var(--space5_5);
    }
}

@media (max-width: 432px) {
    .page-section.gallery {
        --dist: calc(432px - 100vw);
        margin-top: calc(var(--space5_5) + var(--dist) * 0.18);
    }

    @media (max-width: 319px) {
        .page-section.gallery {
            margin-top: calc(var(--space5_5) + 20px);
        }
    }
}

@media (max-width: 640px) {
    .page-home .ses-gallery {
        width: 104%;
        margin-left: -2%;
        height: auto;
        margin-top: -2%;
    }

    .page-home .ses-gallery.masked.by-height .mask {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 641px) and (max-width: 1199px) {
    .page-home .ses-gallery {
        --extraWidth: 12%;
        width: calc(100% + var(--extraWidth));
        margin-left: calc(var(--extraWidth) * -0.8);
        height: auto;
        margin-top: -2%;
    }

    .page-home .ses-gallery.masked.by-height .mask {
        width: 100%;
        height: auto;
    }

    @media (min-width: 900px) {
        .page-home .ses-gallery {
            --extraWidth: 8%;
        }
    }
}

@media (min-width: 731px) and (max-width: 1199px) {
    @media (max-height: 800px) {
        .page-section.gallery {
            margin-top: var(--space5);
        }
    }

    @media (min-height: 801px) {
        .page-section.gallery {
            margin-top: 6vh;
        }
    }
}

@media (min-width: 1200px) {
    .page-section.gallery {
        height: 100%;
    }

    .page-home .ses-gallery {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-54%, -50%);
        max-height: 1100px;
        height: 100%; /* or 96%? might need adjustment */
    }

    @media (max-width: 1439px) {
        .page-home .ses-gallery {
            --shrink: calc((1439px - 100vw) * 0.837);
            max-height: calc(1100px - var(--shrink));
        }
    }
}

.page-section.intro .ses-floor-plan .plan .legend {
    font-size: calc(var(--small-text) * 1.4);
}

@media (max-width: 730px) {
    .main > .ses-floor-plan {
        display: none;
    }

    .ses-floor-plan {
        position: absolute;
        top: calc(100% + var(--space2));
        right: var(--space4_5);
    }

    .ses-floor-plan .plan {
        width: 152px;
    }

    .page-section.intro .ses-floor-plan .plan .legend {
        font-size: calc(var(--small-text) * 1.5);
    }
}

@media (max-width: 432px) {
    .ses-floor-plan {
        --dist: calc(432px - 100vw);
        top: calc(100% + var(--space2) + var(--dist) * 0.2);
        right: calc(var(--space4_5) - var(--dist) * 0.22);
    }

    .ses-floor-plan .plan {
        width: calc(152px - var(--dist) * 0.17);
    }

    @media (max-width: 319px) {
        .ses-floor-plan {
            top: calc(100% + var(--space2) + 22px);
            right: calc(var(--space4_5) - 25px);
        }

        .ses-floor-plan .plan {
            width: calc(152px - 19px);
        }
    }
}

@media (min-width: 731px) and (max-width: 1199px) {
    .main > .ses-floor-plan {
        display: none;
    }

    .ses-floor-plan {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .ses-floor-plan .plan {
        width: 22vw;
    }

    @media (min-width: 900px) {
        .ses-floor-plan .plan {
            --dist: calc(100vw - 900px);
            width: calc(22vw - (var(--dist) * 0.2));
        }
    }
}

@media (min-width: 1200px) {
    .page-section.intro .ses-floor-plan {
        display: none;
    }

    .main > .ses-floor-plan {
        position: fixed;
        bottom: var(--bottomPadding);
        left: calc(var(--headerTopHPadding) + var(--space4) + var(--space3_5));
        z-index: 20;
    }

    .main > .ses-floor-plan .plan {
        width: 260px;
        height: auto;
    }

    @media (min-width: 1600px) {
        .main > .ses-floor-plan {
            left: calc(((100vw - var(--max-width)) / 2) + var(--headerTopHPadding) + var(--space4) + var(--space3_5));
        }
    }

    @media (min-height: 630px) and (max-height: 864px) {
        .main > .ses-floor-plan .plan {
            --shrink: calc((864px - 100vh) * 0.7);
            width: calc(260px - var(--shrink));
        }

        .main > .ses-floor-plan {
            --shrink: calc((864px - 100vh) * 0.05);
            bottom: calc(var(--bottomPadding) - var(--shrink));
        }
    }

    @media (max-height: 629px) {
        .main > .ses-floor-plan {
            top: 490px;
            bottom: initial;
        }
        
        .main > .ses-floor-plan .plan {
            width: 96px;
        }
    }
}

.page-section.intro .toggle-side-panel.updates {
    position: relative;
    display: inline-block;
    margin-top: var(--space3);
}

.page-home .ses-gallery [data-image="0"] {
    object-position: 20% 50%;
}