:root {
    --heroHome--icon-size: 1.5rem;
}

.hero-home__block {
    background-color: var(--color--l-grey);
}

.heroHome {
    position: relative;
    height: 100vh;
    padding-top: calc(var(--fluid--24) + var(--siteHeader-height));
}

.heroHome__contents {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    padding-bottom: var(--fluid--48);
    display: flex;
    flex-direction: column;
}

.heroHome__headline-wrap {
    flex: 1 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.bg-poster__wrap.is-heroHome {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg-poster__wrap.is-heroHome img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#posterDesktop {
    display: block;
}

#posterMobile {
    display: none;
}

.bg-iframe__holder.is-heroHome {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
}

.heroHome__banner-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
}

.banner__item {
    position: relative;
    height: 100%;
}

.banner__item--weather {
    position: absolute;
    z-index: 5;
    bottom: calc(100% - 1px);
    right: 0;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
}

.bannerItem--weather__contents {
    width: 100%;
    transform: translateY(100%);
    /*padding: var(--fluid--16);*/
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: var(--blur--global);
    backdrop-filter: var(--blur--global);
    transition: transform var(--duration--medium) var(--timing--ease-in-out);
}

.banner__item--weather.open .bannerItem--weather__contents {
    transform: translateY(0);
}

.banner__item#bannerSlider {
    overflow: hidden;
    z-index: 10;
    width: 100%;
    margin-right: -1px;
    white-space: nowrap;
}

.banner-slider__holder {
    width: 100%;
    height: 100%;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translate(calc(100% - 1px), 0);
    transition: transform var(--duration--medium) var(--timing--ease-in-out);
}

.banner-slider__holder.open {
    transform: translate(calc(0% + 1px), 0);
}

.swiper.is-heroHome-banner {
    height: 100%;
}

.is-heroHome-banner .swiper-wrapper {
    display: flex;
}

.is-heroHome-banner .swiper-slide {
    position: relative;
    font-size: var(--fs--sans-s);
    text-align: left;
    padding: var(--fluid--16) var(--fluid--24);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.banner__text {
    white-space: normal;
    display: inline-block;
}

.banner__link {
    text-decoration: underline;
    text-underline-offset: 0.4em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.banner__link:after {
    content: '';
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.banner__item:not(#bannerSlider) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--fluid--16);
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}

.banner__icon {
    width: var(--heroHome--icon-size);
    height: var(--heroHome--icon-size);
    opacity: 1;
    transition: opacity var(--duration--medium) var(--timing--ease-in-out);
}

a.banner__item:hover {
    opacity: 1;
}

.banner__item#bannerCam-trigger:hover .banner__icon {
    opacity: 0.5;
}

.banner__item#bannerSlider-trigger:hover .banner__icon.active,
.banner__item#bannerWeather-trigger:hover .banner__icon.active {
    opacity: 0.5;
}

.banner__icon#bannerSlider-open,
.banner__icon#bannerWeather-open {
    position: relative;
    z-index: 0;
    opacity: 0;
}

.banner__icon#bannerSlider-close,
.banner__icon#bannerWeather-close {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--heroHome--icon-size) - 0.2rem);
    height: calc(var(--heroHome--icon-size) - 0.2rem);
    opacity: 0;
    pointer-events: none;
}

.banner__icon.active#bannerSlider-open, 
.banner__icon.active#bannerSlider-close,
.banner__icon.active#bannerWeather-open, 
.banner__icon.active#bannerWeather-close {
    opacity: 1;
}

/* Weather Shortcode */
.bannerItem--weather__contents #splw-location-weather-pro-17840.splw-main-wrapper:not(.weather-map) {
    margin-top: 0;
    margin-bottom: 0;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840:not(.tabs-view, .table-view,.table) .splw-pro-wrapper {
    background: rgba(0, 0, 0, 0);
}

.bannerItem--weather__contents #splw-location-weather-pro-17840.splw-main-wrapper:not(.horizontal-view,.tabs-view,.table-view) .splw-pro-wrapper {
    padding-top: var(--fluid--16);
    color: currentColor;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840.splw-main-wrapper:is(.horizontal-view) .splw-weather-detailed-updated-time {
    margin-right: var(--fluid--24);
    margin-left: var(--fluid--24);
    margin-bottom: var(--fluid--8);
}

.bannerItem--weather__contents #splw-location-weather-pro-17840.splw-main-wrapper:not(.horizontal-view,.tabs-view,.table-view,.template-one,.template-two,.template-three) .splw-pro-wrapper div:is(.splw-pro-header-title-wrapper,.splw-pro-current-temp,.splw-pro-weather-short-desc,.splw-other-opt,.splw-adv-forecast-days,.splw-weather-detailed-updated-time) {
    margin-bottom: 0;
}

.bannerItem--weather__contents .splw-pro-wrapper .splw-pro-current-temp {
    padding-left: 0;
    padding-right: 0;
}

.bannerItem--weather__contents .splw-pro-wrapper {
    font-family: var(--ff--sans);
    font-size: var(--fs--sans-b);
    letter-spacing: var(--ls--s);
    text-transform: uppercase;
}

/* Weather text*/
.bannerItem--weather__contents #splw-location-weather-pro-17840 div:is(.splw-pro-header-title, .splw-weather-header__city,.splw-weather-header__current) {
    font-size: var(--fs--sans-xs);
    letter-spacing: var(--ls--m);
    text-transform: uppercase;
    color: currentColor;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840 div:is(.splw-pro-current-time,.splw-weather-header__time-value,.splw-weather-header__date) {
    font-size: var(--fs--sans-s);
    letter-spacing: var(--ls--s);
    color: currentColor;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840 .splw-pro-current-temp span.cur-temp {
    font-size: calc(var(--fs--disp-3) * 0.75 );
    font-family: var(--ff--heading);
    font-weight: 400;
    line-height: var(--lh--s);
    color: currentColor;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840 .splw-pro-current-temp .temperature-scale {
    font-family: var(--ff--sans);
    font-weight: 500;
    font-size: var(--fs--sans-s);
    color: currentColor;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840 .splw-pro-current-temp span.temp-min-max, 
.bannerItem--weather__contents #splw-location-weather-pro-17840 .splw-weather-description__high-low {
    font-size: var(--fs--sans-s);
    letter-spacing: var(--ls--s);
    color: currentColor;
}

.bannerItem--weather__contents #splw-location-weather-pro-17840 .weather-desc {
    font-size: var(--fs--sans-s);
    letter-spacing: var(--ls--s);
    color: currentColor;
}

@media (max-width: 767px) {
    .heroHome__banner-wrap {
        flex-wrap: wrap;
    }

    .banner__item {
        height: auto;
    }

    .banner__item#bannerSlider {
        min-height: calc(var(--heroHome--icon-size) + (var(--fluid--16) * 2));
    }

    .is-heroHome-banner .swiper-slide {
        justify-content: center;
        text-align: center;
        padding: var(--fluid--16);
    }

    .banner__item:not(#bannerSlider) {
        flex-grow: 1;
    }

    .banner__item#bannerSlider-trigger {
        border-left: 1px solid currentColor;
    }

    .banner-slider__holder {
        border-bottom: none;
        border-right: 1px solid currentColor;
        transform: translate(0, 100%);
    }
    
    .banner-slider__holder.open {
        transform: translate(0, 0%);
    }

    .banner__item--weather {
        position: absolute;
        bottom: calc((100% - var(--heroHome--bannerH)) - 1px);
        right: auto;
        left: 0;
        width: calc(100% - (1px / 2));
        max-width: none;
        overflow: hidden;
    }

    .bannerItem--weather__contents #splw-location-weather-pro-17840 .splw-pro-current-temp span.cur-temp {
        font-size: var(--fs--disp-3);
    }

    #posterDesktop {
        display: none;
    }
    
    #posterMobile {
        display: block;
    }
}