/* Home Variables */
.cf-home {
    --cf-hero-image-height: 360px;
    --cf-tabs-slanting-angle: 21deg;
    --cf-tabs-slanting-overlap: 8px;
    --cf-tabs-slanting-piece-width: 36px;
    --cf-tab-shadow: 12px 16px 12px -4px rgba(0,0,0,0.3);
    --cf-home-tab-header-padding: 16px 46px 12px 46px;
    --cf-home-tab-margin: -56px;
    --cf-home-search-form-button-height: 48px;
    --cf-home-search-form-label-gradient: linear-gradient(to bottom, var(--cf-color-off-white) 36%, var(--cf-color-white) 36% 100%);
    --cf-home-tab-header-text-font: bold 22px var(--cf-header-font-family);
    --cf-home-tab-container-padding: 28px 0px;
    --cf-home-tab-lease-button-padding: 16px 64px;
    --cf-home-tab-content-margin: 32px;
    --cf-home-description-text-block-padding: 16px 0;
    --cf-home-grid-table-description-col-width: 40%;
    --cf-home-grid-vendor-details-icon-padding: 8px;
    --cf-home-vendor-dropdown-width: 250px;
    --cf-home-vendor-dropdown-position-top: 100%;
    --cf-home-vendor-dropdown-padding: 8px 0;
    --cf-home-vendor-dropdown-link-padding: 8px 16px;
    margin-top: calc(-1 * var(--cf-main-top-padding));
}

.cf-home {
    background-color: var(--cf-color-white);
}

    .cf-home .cf-hero .hero-container {
        grid-column: 1 / span 12;
        position: relative;
        overflow: hidden;
    }

    .cf-home .cf-hero .cf-hero-video {
        display: flex;
        height: var(--cf-hero-image-height);
        object-fit: cover;
    }

    .cf-home .cf-hero .hero-container .cf-announcement-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--cf-home-announcement-container-width);
        overflow-y: auto;
        display: flex;
        flex-direction: column-reverse;
        padding: var(--cf-home-announcement-container-vertical-padding) var(--cf-home-announcement-container-horizontal-padding);
    }

    /* Home - Tabs */
    .cf-home .cf-tabs {
        position: relative;
        margin-top: var(--cf-home-tab-margin);
        z-index: 1;
    }

    .cf-home .nav-tabs {
        border: none;
    }

        .cf-home .nav-tabs > .nav-item {
            margin-left: var(--cf-tabs-slanting-overlap);
        }

            .cf-home .nav-tabs > .nav-item:nth-child(1) {
                margin-left: 0;
            }

            .cf-home .nav-tabs > .nav-item .nav-link {
                height: 56px;
                font: var(--cf-home-tab-header-text-font);
                border-radius: 0;
                border-width: 0;
                margin: 0;
                color: var(--cf-color-dark-blue);
                background-color: var(--cf-color-off-white);
                isolation: auto;
            }

                .cf-home .nav-tabs > .nav-item .nav-link:focus-visible {
                    box-shadow: none;
                }

            .cf-home .nav-tabs > .nav-item:nth-child(2) .nav-link {
                background-color: var(--cf-color-dark-blue);
                color: var(--cf-color-white);
            }

        .cf-home .nav-tabs > .nav-item {
            display: flex;
            margin-right: calc(var(--cf-tabs-slanting-overlap) * -1);
        }

        .cf-home .nav-tabs > li.nav-item::after {
            display: inline-block;
            content: ' ';
            width: var(--cf-tabs-slanting-piece-width);
            height: 100%;
            transform: skewX(var(--cf-tabs-slanting-angle));
            margin-left: calc(var(--cf-tabs-slanting-piece-width)/-2);
            background-color: var(--cf-color-off-white);
        }

        .cf-home .nav-tabs > li.nav-item:nth-child(2)::after {
            background-color: var(--cf-color-dark-blue);
            height: 99.5%;
        }

        .cf-home .nav-tabs > li.nav-item > .nav-link.active {
            z-index: 1;
        }

    /*Home - Tab Panels */
    .cf-home #home-tab-content .show {
        margin-bottom: var(--cf-home-tab-content-margin);
    }

        .cf-home #home-tab-content .show#daily-rental {
            background-color: var(--cf-color-off-white);
        }

            .cf-home #home-tab-content .show#daily-rental button {
                height: var(--cf-home-search-form-button-height);
            }

            .cf-home #home-tab-content .show#daily-rental input:not(:placeholder-shown) + label {
                background: var(--cf-home-search-form-label-gradient);
            }

        .cf-home #home-tab-content .show#short-term-lease {
            display: flex;
            color: var(--cf-color-white);
            background-color: var(--cf-color-dark-blue);
        }

            .cf-home #home-tab-content .show#short-term-lease p.cf-p3 {
                color: var(--cf-color-off-white);
            }

            .cf-home #home-tab-content .show#short-term-lease a {
                color: var(--cf-color-white);
                text-align: center;
            }


    .cf-home #home-tab-content #short-term-lease .cf-home-lease-tab-text {
        grid-column: span 12;
    }

    .cf-home #home-tab-content #short-term-lease .cf-home-lease-tab-button {
        grid-column: 9 / span 4;
        display: flex;
        align-items: center;
    }

    .cf-home .nav-tabs .nav-link {
        padding: var(--cf-home-tab-header-padding);
    }

    .cf-home #home-tab-content .tab-pane {
        padding: var(--cf-home-tab-container-padding);
    }

    .cf-home .cf-home-description .cf-home-desc-text-block {
        margin: var(--cf-home-description-text-block-padding);
    }

        .cf-home .cf-home-description .cf-home-desc-text-block a {
            color: var(--cf-color-button-blue);
            font-weight: 700;
        }

    .cf-home .cf-home-description h2 {
        color: var(--cf-color-dark-blue);
        padding-bottom: 32px;
    }

    .cf-home .cf-home-description h3 {
        color: var(--cf-color-button-blue);
    }

    .cf-home .cf-homepage-table table {
        table-layout: fixed;
        width: 100%;
    }

    .cf-home .cf-homepage-table thead {
        background-color: var(--cf-color-dark-blue);
        color: var(--cf-color-white);
        padding: 0;
        border: none !important;
    }

    .cf-home .cf-homepage-table tbody tr {
        background-color: var(--cf-color-brand-light-blue);
        color: var(--cf-color-black);
    }

    .cf-home .cf-homepage-table tfoot tr {
        padding-top: 24px;
    }

    .cf-home .cf-homepage-table thead th,
    .cf-home .cf-homepage-table tbody td {
        border: 1px solid var(--cf-color-med-light-grey);
    }

    .cf-home .cf-homepage-table thead th,
    .cf-home .cf-homepage-table tbody td,
    .cf-home .cf-homepage-table tfoot td {
        max-height: 56px;
        padding: 16px;
        text-align: center;
        width: 30%;
    }

        .cf-home .cf-homepage-table thead th.feature,
        .cf-home .cf-homepage-table tbody td.feature,
        .cf-home .cf-homepage-table tfoot td.feature {
            text-align: left;
            width: 40%;
        }

        .cf-home .cf-homepage-table tbody td i {
            color: var(--cf-color-green);
        }

        .cf-home .cf-homepage-table tbody td.cf-table-lease-text {
            padding: 4px 0;
        }

    .cf-home .cf-homepage-table tbody .cf-table-link-row {
        background-color: var(--cf-color-light-grey);
    }

        .cf-home .cf-homepage-table tbody .cf-table-link-row div {
            display: flex;
            justify-content: center;
        }

        .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown,
        .cf-home .cf-mobile-tfoot .cf-vendor-dropdown {
            position: relative;
            display: flex;
        }

        .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown-content,
        .cf-home .cf-mobile-tfoot .cf-vendor-dropdown-content {
            background-color: var(--cf-color-off-white);
            min-width: var(--cf-home-vendor-dropdown-width);
            display: none;
            position: absolute;
            top: var(--cf-home-vendor-dropdown-position-top);
            max-height: unset;
            padding: var(--cf-home-vendor-dropdown-padding);
            z-index: 1;
            box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.2);
        }

        .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown-button,
        .cf-home .cf-mobile-tfoot .cf-vendor-dropdown-button {
            cursor: pointer;
        }

        .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown-button i,
        .cf-home .cf-mobile-tfoot .cf-vendor-dropdown-button i {
            color: var(--cf-color-dark-blue);
            margin-left: 4px;
            align-self: center;
        }

        .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown-content .cf-vendor-link,
        .cf-home .cf-mobile-tfoot .cf-vendor-dropdown-content .cf-vendor-link {
            display: flex;
            border: none;
            background-color: var(--cf-color-off-white);
            padding: var(--cf-home-vendor-dropdown-link-padding);
            justify-content: flex-start;
        }

            .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown-content .cf-vendor-link a,
            .cf-home .cf-mobile-tfoot .cf-vendor-dropdown-content .cf-vendor-link a {
                display: flex;
                color: var(--cf-color-black);
            }

        .cf-home .cf-homepage-table tbody .cf-table-link-row .cf-vendor-dropdown-content.vendor-show,
        .cf-home .cf-mobile-tfoot .cf-vendor-dropdown-content.vendor-show {
            display: block;
        }

    .cf-home .cf-homepage-table tfoot td a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cf-home .cf-mobile-tfoot {
        display: none;
    }

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

    .cf-home .cf-homepage-table tfoot td a {
        min-height: 56px;
    }
}

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

    .cf-home .cf-hero .hero-container .cf-announcement-container {
        padding-bottom: calc(56px + var(--cf-home-announcement-container-vertical-padding));
    }
}

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

    .cf-home .nav-tabs > .nav-item {
        margin-left: var(--cf-tabs-slanting-overlap);
        display: inline-block;
        width: 50%;
    }

    .cf-home .nav-tabs .nav-link {
        width: 100%;
        padding: 16px 0;
    }

        .cf-home .nav-tabs .nav-link h5 {
            text-align: center;
        }

    .cf-home .nav-tabs > li.nav-item::after {
        display: none;
    }

    .cf-home #home-tab-content #short-term-lease .cf-grid {
        grid-row-gap: 32px;
    }

    .cf-home #home-tab-content #short-term-lease .cf-home-lease-tab-text {
        grid-column: span 12;
    }

    .cf-home #home-tab-content #short-term-lease .cf-home-lease-tab-button {
        grid-column: span 10;
        display: flex;
        align-items: center;
    }

    .cf-home .cf-homepage-table thead th,
    .cf-home .cf-homepage-table tbody td,
    .cf-home .cf-homepage-table tfoot td {
        max-height: unset;
        padding: 8px;
    }

    .cf-home .cf-homepage-table tbody .cf-table-link-row,
    .cf-home .cf-homepage-table tfoot {
        display: none;
    }

    .cf-home .cf-mobile-tfoot {
        display: grid;
        grid-row-gap: 24px;
        margin: 16px 8px 0 8px;
    }

        .cf-home .cf-mobile-tfoot h6,
        .cf-home .cf-mobile-tfoot div {
            grid-column: 1 / span 12;
        }

        .cf-home .cf-mobile-tfoot div {
            display: flex;
        }

        .cf-home .cf-mobile-tfoot > a {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            grid-column-start: span 6;
            height: 64px;
        }
}